/* Extracted from catalog-template.php */
:root {
    --accent-color: #4caf50;
    --font-family-ui: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-family-data: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --color-white: #ffffff;
    --color-black: #000000;
    --color-text-primary: #1d1d1f;
    --color-text-strong: #111827;
    --color-text-secondary: #374151;
    --color-text-muted: #6b7280;
    --color-text-subtle: #86868b;
    --color-text-slate: #64748b;
    --color-surface-base: #ffffff;
    --color-surface-muted: #f9fafb;
    --color-surface-soft: #f5f5f7;
    --color-surface-soft-2: #e8e8ed;
    --color-surface-slate: #f8fafc;
    --color-surface-slate-2: #f1f5f9;
    --color-border-soft: #f3f4f6;
    --color-border-muted: #e5e7eb;
    --color-border-subtle: #d1d1d6;
    --color-border-alt: #dee2e6;
    --color-danger: #ef4444;
    --color-danger-strong: #dc2626;
    --color-danger-soft: #fef2f2;
    --color-warning: #f59e0b;
    --color-success: #22c55e;
    --color-success-strong: #10b981;
    --color-success-apple: #34c759;
    --color-success-soft: #e8f5e9;
    --color-info: #3b82f6;
    --color-info-strong: #007aff;
    --color-info-strong-hover: #0051d5;
    --color-charcoal: #1a1a1a;
    --color-slate-900: #1e293b;
    --border-radius: 12px;
}

        /* Cache Busting - Updated: <?php echo date('Y-m-d H:i:s'); ?> - ASPECT RATIO 4:5 */
        
        /* ⏳ ANIMACIÓN PULSE PARA TOOLTIP "ELIMINANDO..." */
        @keyframes pulse {
            0% { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
            50% { opacity: 0.8; transform: translateX(-50%) translateY(0) scale(1.03); }
            100% { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
        }
        
        /* 🔴 TOOLTIP ESPECÍFICO PARA ESTADO "ELIMINANDO" */
        .active-category-tooltip.deleting {
            position: fixed !important;
            bottom: 56px !important;
            left: 50% !important;
            transform: translateX(-50%) translateY(0) !important;
            background: rgba(255, 107, 107, 0.95) !important;
            backdrop-filter: blur(10px) !important;
            color: var(--color-white) !important;
            padding: 6.2px 40px 20px 40px !important;
            border-radius: 20px !important;
            display: flex !important;
            align-items: center !important;
            gap: 6px !important;
            box-shadow: 0 4px 12px rgba(255, 107, 107, 0.4) !important;
            font-size: 12px !important;
            font-weight: 500 !important;
            z-index: 1 !important;
            white-space: nowrap !important;
            pointer-events: none !important;
            opacity: 1 !important;
            transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
            animation: slideUpFadeIn 0.4s cubic-bezier(0.25, 0.8, 0.25, 1) forwards !important;
        }
        
        /* ✨ ANIMACIONES ELEGANTES PARA TOOLTIP ELIMINANDO */
        @keyframes slideUpFadeIn {
            0% { 
                opacity: 0;
                transform: translateX(-50%) translateY(20px);
            }
            100% { 
                opacity: 1;
                transform: translateX(-50%) translateY(0);
            }
        }
        
        @keyframes slideDownFadeOut {
            0% { 
                opacity: 1;
                transform: translateX(-50%) translateY(0);
            }
            100% { 
                opacity: 0;
                transform: translateX(-50%) translateY(20px);
            }
        }
        
        /* 🚫 CLASE PARA ANIMACIÓN DE SALIDA */
        .active-category-tooltip.deleting.fade-out {
            animation: slideDownFadeOut 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) forwards !important;
        }
        
        /* 🔴 FLECHA ROJIZA PARA TOOLTIP "ELIMINANDO" */
        .active-category-tooltip.deleting::after {
            content: '' !important;
            position: absolute !important;
            top: 100% !important;
            left: 50% !important;
            transform: translateX(-50%) !important;
            width: 0 !important;
            height: 0 !important;
            border-left: 6px solid transparent !important;
            border-right: 6px solid transparent !important;
            border-top: 6px solid rgba(255, 107, 107, 0.95) !important;
        }
        
        /* OCULTAR MODAL INMEDIATAMENTE - CRÍTICO PARA EVITAR FLASH */
        .order-modal, #order-modal {
            display: none !important;
            opacity: 0 !important;
            visibility: hidden !important;
        }
        
        /* FORZAR COLOR SVG INMEDIATAMENTE - EVITAR FLASH NEGRO */
        @supports (-webkit-appearance: none) and (-ms-text-size-adjust: none) {
    svg, svg *, svg path {
        fill: rgb(0 0 0) !important;
        color: inherit !important;
    }
}@supports (-webkit-appearance: none) and (not (-webkit-overflow-scrolling: touch)) {
    svg, svg *, svg path {
        fill: rgb(0 0 0) !important;
        color: inherit !important;
    }
}
        
        svg, svg *, svg path {
            fill: currentColor !important;
            color: inherit !important;
            
        }

        .product-cart-icon {
            color: var(--color-white) !important;
        }

        .product-cart-icon svg {
            fill: var(--color-white) !important;
            color: var(--color-white) !important;
        }

        .product-zone.has-items .product-cart-icon {
            color: #4CAF50 !important;
        }

        .product-zone.has-items .product-cart-icon svg {
            fill: #4CAF50 !important;
            color: #4CAF50 !important;
        }
        
        :root {
            --primary-color: #2c5aa0;
            --primary-light: #4a7bc8;
            --primary-dark: #1e3d71;
            --success-color: #25D366;
            --background: var(--color-surface-slate);
            --surface: var(--color-white);
            --text-primary: #1a202c;
            --text-secondary: #718096;
            --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
            --border-radius: 12px;
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: var(--font-family-ui);
            font-weight: 400;
            background: var(--background);
            color: var(--text-primary);
            line-height: 1.5;
            overflow-x: hidden;
            text-rendering: optimizeLegibility;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
        }

        button,
        input,
        textarea,
        select {
            font-family: inherit;
        }


    /* HEADER PROFESIONAL Y MINIMALISTA - FRANJA COMPLETA */
    .header-wrapper {
        width: 100vw !important; /* Viewport width completo */
        margin-left: calc(-50vw + 50%) !important; /* Centrar desde contenedor limitado */
        background: var(--color-white) !important;
        border-bottom: 1px solid var(--color-border-muted) !important;
        position: sticky !important;
        top: 0 !important;
        z-index: 100 !important;
        padding: 0 !important;
    }

    .catalog-header {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        padding: 16px 1.5rem !important; /* Padding interno */
        max-width: 800px !important; /* Mismo límite que menú y categorías */
        margin: 0 auto !important; /* Centrado */
    }

    .header-left {
        flex: 9 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        position: relative !important;
        gap: 8px !important;
        min-width: 0 !important;
    }



    .business-name {
        font-size: 18px !important;
        font-weight: 600 !important;
        color: #1f2937 !important;
        margin: 0 20px 0 0 !important;
        letter-spacing: -0.01em !important;
    }

    .header-center {
        flex: 1 !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
    }

    .header-right {
        flex: 1 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        gap: 12px !important;
    }

    .business-logo { 
       max-height: 40px !important;
max-width: 100px !important;
height: 40px !important;
width: 100px !important;
        object-fit: contain !important;
        border-radius: 6px !important;
        /* Alta resolución para pantallas Retina */
        image-rendering: -webkit-optimize-contrast !important;
        image-rendering: crisp-edges !important;
    }



    .share-btn {
        background: none !important;
        border: 1.5px solid var(--color-border-muted) !important;
        border-radius: 8px !important;
        padding: 8px !important;
     
        cursor: pointer !important;
        transition: all 0.2s ease !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 36px !important;
        height: 36px !important;
    }

    .share-btn:hover {
        background: var(--color-surface-muted) !important;
        border-color: #d1d5db !important;
        color: var(--color-text-secondary) !important;
        transform: translateY(-1px) !important;
    }

    .share-btn:active {
        transform: translateY(0) !important;
        background: var(--color-border-soft) !important;
    }

    .share-btn svg {
        width: 18px !important;
        height: 18px !important;
    }
    
    /* === PEDIDOS BADGE === */
    .pedidos-badge {
        position: absolute !important;
        top: -6px !important;
        right: -6px !important;
        background: var(--color-danger) !important;
        color: var(--color-white) !important;
        font-size: 11px !important;
        font-weight: 600 !important;
        min-width: 18px !important;
        height: 18px !important;
        border-radius: 9px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 0 5px !important;
        line-height: 1 !important;
    }

    /* === LIVE MODE BUTTON (PROPIETARIOS) === */
    .live-mode-btn { border: none !important;
        border-radius: 8px !important;
        width: 40px !important;
        height: 40px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        cursor: pointer !important;
        transition: all 0.2s ease !important;
        flex-shrink: 0 !important;
        background: none;
    } 
    
  
    
    
    .live-mode-dot {
        width: 12px !important;
        height: 12px !important;
        border-radius: 50% !important;
        background: #ef4444 !important;
        box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.18) !important;
        display: inline-block !important;
    }

.live-mode-btn:active {
        transform: scale(0.95) !important;
    }
    
    /* === LIVE MODE BANNER (CLIENTES) === */
    .live-banner {
        display: none !important;
        position: relative !important;
        background: #ff0000 !important;
        padding: 6px 12px !important;
        border-radius: 16px !important;
        box-shadow: 0 2px 8px rgba(255, 0, 0, 0.3) !important;
        animation: slideDown 0.3s ease-out !important;
        cursor: pointer !important;
        transition: all 0.2s ease !important;
        width: fit-content !important;
    }
    
    .live-banner.active {
        display: block !important;
    }
    
    .live-banner:hover {
        transform: translateY(-2px) !important;
        box-shadow: 0 4px 12px rgba(255, 0, 0, 0.4) !important;
    }
    
    /* Contenedor wrapper para posicionar el banner */
    .header-wrapper {
        position: relative !important;
    }
    
    .catalog-header {
        position: relative !important;
        max-width: 800px !important;
        margin: 0 auto !important;
    }
    
    /* Ajustar posición del banner dentro del contenedor centrado */
    .catalog-header::after {
        content: '' !important;
        display: block !important;
        position: relative !important;
    }
    
    .live-banner-wrapper {
        position: absolute !important;
        top: 100% !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        max-width: 800px !important;
        width: 100% !important;
        padding: 0 1.5rem !important;
        margin-top: 6px !important;
        pointer-events: none !important;
        box-sizing: border-box !important;
        display: flex !important;
        justify-content: flex-start !important;
        z-index: 1001 !important;
    }
    
    .live-banner-wrapper .live-banner {
        pointer-events: all !important;
    }
    
    .live-banner-content {
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
    }
    
    .live-banner-left {
        display: flex !important;
        align-items: center !important;
        gap: 6px !important;
    }
    
    .live-banner-dot {
        width: 8px !important;
        height: 8px !important;
        background: var(--color-white) !important;
        border-radius: 50% !important;
        animation: pulse-dot 1.5s infinite !important;
    }
    
    .live-banner-text {
        color: var(--color-white) !important;
        font-weight: 600 !important;
        font-size: 12px !important;
        white-space: nowrap !important;
    }
    
    .live-banner-btn {
        display: none !important;
    }
    
    
    
    @keyframes pulse-live {
        0%, 100% { opacity: 1; }
        50% { opacity: 0.9; }
    }
    
    @keyframes pulse-dot {
        0%, 100% { transform: scale(1); opacity: 1; }
        50% { transform: scale(1.2); opacity: 0.8; }
    }
    
    @media (max-width: 767px) {
        .live-banner-wrapper {
            padding: 0 1rem !important;
        }
        
        .live-banner {
            padding: 5px 10px !important;
        }
        
        .live-banner-text {
            font-size: 11px !important;
        }
        
        .live-banner-dot {
            width: 6px !important;
            height: 6px !important;
        }
    }
    
    /* === LIVE MODE PANEL (ADMIN) === */
    .live-mode-panel {
        position: fixed !important;
        top: 0 !important;
        left: 50% !important;
        transform: translate(-50%, -100%) !important;
        background: var(--color-white) !important;
        border-radius: 0 0 16px 16px !important;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15) !important;
        padding: 20px !important;
        width: 90% !important;
        max-width: 450px !important;
        z-index: 10000 !important;
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    }
    
    .live-mode-panel.active {
        transform: translate(-50%, 0) !important;
    }
    
    .live-panel-header {
        display: flex !important;
        align-items: center !important;
        gap: 10px !important;
        margin-bottom: 16px !important;
        padding-bottom: 16px !important;
        border-bottom: 1px solid var(--color-border-muted) !important;
    }
    
    .live-panel-icon {
        font-size: 24px !important;
    }
    
    .live-panel-title {
        font-size: 18px !important;
        font-weight: 600 !important;
        color: #1f2937 !important;
        flex: 1 !important;
    }
    
    .live-panel-close {
        background: none !important;
        border: none !important;
        font-size: 24px !important;
        color: #9ca3af !important;
        cursor: pointer !important;
        padding: 0 !important;
        line-height: 1 !important;
    }
    
    .live-panel-status {
        background: var(--color-surface-muted) !important;
        border-radius: 8px !important;
        padding: 12px !important;
        margin-bottom: 16px !important;
    }
    
    .live-panel-status-text {
        font-size: 14px !important;
        color: var(--color-text-muted) !important;
        margin-bottom: 8px !important;
    }
    
    .live-panel-time {
        font-size: 16px !important;
        font-weight: 600 !important;
        color: #1f2937 !important;
    }
    
    .live-panel-btn {
        width: 100% !important;
        padding: 14px !important;
        border: none !important;
        border-radius: 8px !important;
        font-size: 15px !important;
        font-weight: 600 !important;
        cursor: pointer !important;
        transition: all 0.2s ease !important;
    }
    
    .live-panel-btn-activate {
        background: #ff0000 !important;
        color: var(--color-white) !important;
    }
    
    .live-panel-btn-activate:hover {
        background: #dc0000 !important;
        transform: translateY(-1px) !important;
    }
    
    .live-panel-btn-deactivate {
        background: var(--color-text-muted) !important;
        color: var(--color-white) !important;
    }
    
    .live-panel-btn-deactivate:hover {
        background: #4b5563 !important;
        transform: translateY(-1px) !important;
    }
    
    .live-panel-url-section {
        margin-bottom: 16px !important;
    }
    
    .live-panel-label {
        display: block !important;
        font-size: 13px !important;
        font-weight: 600 !important;
        color: var(--color-text-muted) !important;
        margin-bottom: 8px !important;
    }
    
    .live-panel-input {
        width: 100% !important;
        padding: 10px 12px !important;
        border: 2px solid var(--color-border-muted) !important;
        border-radius: 6px !important;
        font-size: 14px !important;
        margin-bottom: 8px !important;
        transition: border-color 0.2s ease !important;
    }
    
    .live-panel-input:focus {
        outline: none !important;
        border-color: #ff0000 !important;
    }
    
    .live-panel-save-url {
        width: 100% !important;
        padding: 10px !important;
        background: var(--color-border-soft) !important;
        border: 1px solid var(--color-border-muted) !important;
        border-radius: 6px !important;
        font-size: 13px !important;
        font-weight: 500 !important;
        cursor: pointer !important;
        transition: all 0.2s ease !important;
    }
    
    .live-panel-save-url:hover {
        background: var(--color-border-muted) !important;
    }
    
    .live-panel-overlay {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        background: rgba(0, 0, 0, 0.3) !important;
        z-index: 9999 !important;
        opacity: 0 !important;
        pointer-events: none !important;
        transition: opacity 0.3s ease !important;
    }
    
    .live-panel-overlay.active {
        opacity: 1 !important;
        pointer-events: all !important;
    }
    
    /* === MODAL LIVE PARA CLIENTES === */
    .live-client-overlay {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        background: rgba(0, 0, 0, 0.5) !important;
        z-index: 10001 !important;
        opacity: 0 !important;
        pointer-events: none !important;
        transition: opacity 0.3s ease !important;
    }
    
    .live-client-overlay.active {
        opacity: 1 !important;
        pointer-events: all !important;
    }
    
    .live-client-modal {
        position: fixed !important;
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -50%) scale(0.9) !important;
        background: var(--color-white) !important;
        border-radius: 16px !important;
        box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2) !important;
        padding: 24px !important;
        width: 90% !important;
        max-width: 400px !important;
        z-index: 10002 !important;
        opacity: 0 !important;
        pointer-events: none !important;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    }
    
    .live-client-modal.active {
        opacity: 1 !important;
        pointer-events: all !important;
        transform: translate(-50%, -50%) scale(1) !important;
    }
    
    .live-client-header {
        display: flex !important;
        align-items: center !important;
        gap: 10px !important;
        margin-bottom: 20px !important;
        padding-bottom: 16px !important;
        border-bottom: 1px solid var(--color-border-muted) !important;
    }
    
    .live-client-icon {
        font-size: 24px !important;
        animation: pulse-live 2s infinite !important;
    }
    
    .live-client-title {
        font-size: 18px !important;
        font-weight: 600 !important;
        color: #1f2937 !important;
        flex: 1 !important;
        margin: 0 !important;
    }
    
    .live-client-close {
        background: none !important;
        border: none !important;
        font-size: 28px !important;
        color: #9ca3af !important;
        cursor: pointer !important;
        padding: 0 !important;
        line-height: 1 !important;
        transition: color 0.2s ease !important;
    }
    
    .live-client-close:hover {
        color: #1f2937 !important;
    }
    
    .live-client-content {
        text-align: center !important;
    }
    
    .live-client-text {
        font-size: 15px !important;
        color: var(--color-text-muted) !important;
        margin-bottom: 20px !important;
        line-height: 1.5 !important;
    }
    
    .live-client-btn {
        width: 100% !important;
        padding: 14px !important;
        background: #ff0000 !important;
        color: var(--color-white) !important;
        border: none !important;
        border-radius: 8px !important;
        font-size: 16px !important;
        font-weight: 600 !important;
        cursor: pointer !important;
        transition: all 0.2s ease !important;
    }
    
    .live-client-btn:hover {
        background: #dc0000 !important;
        transform: translateY(-2px) !important;
        box-shadow: 0 4px 12px rgba(255, 0, 0, 0.3) !important;
    }
    
    /* === BUSCADOR DE CÓDIGOS === */
    .product-search-container {
        position: relative !important;
        display: flex !important;
        align-items: center !important;
        width: 100% !important;
        max-width: 200px !important;
        flex: 1 !important;
    }
    
    .search-input-wrapper {
        position: relative !important;
        width: 100% !important;
        flex: 1 !important;
    }
    
    .search-input {
        width: 100% !important;
        height: 32px !important;
        padding: 0 6px 0 6px !important;
        border: 1.5px solid var(--color-border-muted) !important;
        border-radius: 8px !important;
        font-size: 11px !important;
        outline: none !important;
        transition: border-color 0.2s ease !important;
        text-transform: uppercase !important;
    }
    
    .search-input:focus {
        border-color: var(--color-info) !important;
        box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1) !important;
    }
    
    .search-clear-btn {
        position: absolute !important;
        right: 4px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        width: 24px !important;
        height: 24px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        background: none !important;
        border: none !important;
        border-radius: 4px !important;
        cursor: pointer !important;
        opacity: 0 !important;
        pointer-events: none !important;
        transition: all 0.2s ease !important;
        color: #9ca3af !important;
        font-size: 16px !important;
    }
    
    .search-clear-btn.visible {
        opacity: 1 !important;
        pointer-events: all !important;
    }
    
    .search-clear-btn:hover {
        background: var(--color-border-soft) !important;
        color: var(--color-text-muted) !important;
    }
    
    .search-status {
        position: absolute !important;
        right: 4px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        font-size: 16px !important;
        display: none !important;
    }
    
    .search-status.searching {
        display: block !important;
        animation: spin 1s linear infinite !important;
    }
    
    @keyframes spin {
        from { transform: translateY(-50%) rotate(0deg); }
        to { transform: translateY(-50%) rotate(360deg); }
    }
    
    /* Overlay de búsqueda */
    .search-loading-overlay {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(255, 255, 255, 0.7);
        backdrop-filter: blur(4px);
        -webkit-backdrop-filter: blur(4px);
        z-index: 9998;
        display: flex;
        align-items: center;
        justify-content: center;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.2s ease;
    }
    .search-loading-overlay.active {
        opacity: 1;
        pointer-events: auto;
    }
    .search-loading-spinner {
        width: 40px;
        height: 40px;
        border: 3px solid var(--color-border-muted);
        border-top-color: var(--color-info);
        border-radius: 50%;
        animation: spin 0.8s linear infinite;
    }
    
    .search-feedback {
        position: absolute !important;
        top: calc(100% + 8px) !important;
        left: 0 !important;
        right: 0 !important;
        padding: 8px 12px !important;
        border-radius: 8px !important;
        font-size: 13px !important;
        font-weight: 500 !important;
        display: none !important;
        align-items: center !important;
        gap: 6px !important;
        white-space: nowrap !important;
        z-index: 1000 !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
    }
    
    .search-feedback.success {
        display: flex !important;
        background: var(--color-success-strong) !important;
        color: var(--color-white) !important;
    }
    
    .search-feedback.error {
        display: flex !important;
        background: var(--color-danger) !important;
        color: var(--color-white) !important;
    }
    
    .search-feedback-close {
        margin-left: auto !important;
        background: none !important;
        border: none !important;
        color: var(--color-white) !important;
        cursor: pointer !important;
        font-size: 16px !important;
        padding: 0 !important;
        opacity: 0.8 !important;
        line-height: 1 !important;
    }
    
    .search-feedback-close:hover {
        opacity: 1 !important;
    }
    
    /* Responsive */
    @media (max-width: 767px) {
        .live-badge {
            font-size: 11px !important;
            padding: 5px 10px !important;
        }
        
        .live-badge-dot {
            width: 6px !important;
            height: 6px !important;
        }
    }
    
    @media (min-width: 768px) {
        .product-search-container {
            max-width: 260px !important;
        }
        
        .search-input {
            height: 36px !important;
        }
    }

    /* Navegación - Estilos consolidados más abajo en la sección de transiciones */

    .page-navigation {
        /* Contenedor interno centrado con límite de ancho */
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        padding: 1rem !important;
        gap: 0.5rem !important;
        max-width: 800px !important; /* Mismo límite que las imágenes */
        margin: 0 auto !important; /* Centrado dentro del wrapper */
        
        /* Scroll horizontal si es necesario */
        flex-wrap: wrap !important;
        overflow-x: auto !important;
        scrollbar-width: none !important;
        -ms-overflow-style: none !important;
    }

    /* ===== CONTENEDOR DE CATEGORÍA CON BOTÓN ELIMINAR ===== */
    .category-nav-item {
        position: relative;
        display: inline-flex;
        align-items: center;
        transition: opacity 0.3s ease, transform 0.3s ease;
        /* Touch action para permitir  drag horizontal */
        touch-action: manipulation;
        -webkit-user-select: none;
        user-select: none;
    }
    
    /* ===== DRAG & DROP CATEGORÍAS ===== */
    .category-nav-item.dragging {
        opacity: 0.28;
        transform: none;
        z-index: 100;
        cursor: grabbing !important;
    }
    
    .category-nav-item.drag-over {
        transform: none;
    }

    .category-drag-ghost {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        margin: 0 !important;
        box-sizing: border-box !important;
        z-index: 2147483000 !important;
        pointer-events: none !important;
        opacity: 0.96 !important;
        filter: drop-shadow(0 8px 14px rgba(0, 0, 0, 0.28));
        will-change: transform;
        transition: none !important;
    }

    .category-drag-ghost .delete-category-btn {
        display: none !important;
    }

    .category-drag-ghost .category-nav-btn {
        width: 100% !important;
        height: 100% !important;
        cursor: grabbing !important;
    }

    .category-nav-item.drag-over-before::before,
    .category-nav-item.drag-over-after::after {
        content: "";
        position: absolute;
        top: -4px;
        bottom: -4px;
        width: 3px;
        border-radius: 999px;
        background: var(--primary-color, #3b82f6);
        box-shadow: 0 0 0 2px rgba(var(--primary-color-rgb, 59, 130, 246), 0.18);
        pointer-events: none;
    }

    .category-nav-item.drag-over-before::before {
        left: -5px;
    }

    .category-nav-item.drag-over-after::after {
        right: -5px;
    }
    
    .category-nav-item.drag-placeholder {
        opacity: 0.3;
    }
    
    /* Indicador visual durante drag */
    .page-navigation.drag-mode {
        background: rgba(var(--primary-color-rgb, 59, 130, 246), 0.05);
    }
    
    .page-navigation.drag-mode .category-nav-item:not(.dragging) {
        cursor: default;
        transition-duration: 0.12s;
    }

    .page-navigation.saving-order .category-nav-item {
        pointer-events: none;
    }
    
    .category-nav-item .category-nav-btn {
        cursor: pointer;
    }
    
    .page-navigation.drag-mode .category-nav-item .category-nav-btn {
        cursor: grabbing;
    }
    
    .delete-category-btn {
        position: absolute;
        top: -8px;
        right: -8px;
        width: 20px;
        height: 20px;
        border-radius: 50%;
        background: var(--color-danger);
        color: var(--color-white);
        border: none;
        font-size: 14px;
        font-weight: bold;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        opacity: 0;
        transform: scale(0.8);
        transition: all 0.2s ease;
        z-index: 10;
        line-height: 1;
    }
    
    .category-nav-item .category-nav-btn.active + .delete-category-btn {
        opacity: 1;
        transform: scale(1);
    }
    
    .delete-category-btn:hover {
        background: var(--color-danger-strong);
        transform: scale(1.1);
    }
    
    /* Optimización para pantallas táctiles */
    @media (hover: none) and (pointer: coarse) {
        .delete-category-btn {
            opacity: 0.7;
            transform: scale(0.9);
        }
        
        .category-nav-item .category-nav-btn.active + .delete-category-btn {
            opacity: 1;
            transform: scale(1);
            background: var(--color-danger-strong);
        }
    }



    .grid-toggle-btn:hover {
        background: rgba(229, 231, 235, 0.95) !important;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important;
        transform: translateY(-2px) !important;
    }

    .grid-toggle-btn:active {
        background: rgba(209, 213, 219, 0.95) !important;
        transform: translateY(0) scale(0.95) !important;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15) !important;
    }



    .page-navigation::-webkit-scrollbar {
        display: none;
    }

    .nav-btn {
        flex: 0 0 auto;
        padding: 0.75rem 1rem ;
        border: none;
        background: var(--surface);
        color: var(--text-secondary);
        border-radius: 8px;
        font-weight: 500;
        cursor: pointer;
        white-space: nowrap;
        box-shadow: var(--shadow);
        /* Evitar selección y highlight azul */
        -webkit-user-select: none !important;
        -moz-user-select: none !important;
        -ms-user-select: none !important;
        user-select: none !important;
        -webkit-tap-highlight-color: transparent !important;
        outline: none !important;
        -webkit-touch-callout: none !important;
    }

    .nav-btn:hover {
        background: var(--primary-light);
        color: var(--color-white);
    }

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

    /* Navegación minimalista por categorías */
    .category-nav-btn {
        font-size: 0.875rem;
        font-weight: 500;
        padding: 0.55rem 1.5rem;
        border-radius: 8px;
        /* Evitar selección y highlight azul */
        -webkit-user-select: none !important;
        -moz-user-select: none !important;
        -ms-user-select: none !important;
        user-select: none !important;
        -webkit-tap-highlight-color: transparent !important;
        outline: none !important;
        -webkit-touch-callout: none !important;
    }

    .category-nav-btn.active {
        background: var(--primary-color);
        color: var(--color-white);
        font-weight: 400;
    }
    
    /* Botón agregar categoría (pequeño en navegación) */
    .add-category-btn {
        background: var(--color-border-muted) !important;
        color: var(--color-text-muted) !important;
        font-size: 1.2rem !important;
        font-weight: 300 !important;
        width: 40px !important;
        height: 40px !important;
        border-radius: 50% !important;
        padding: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        transition: all 0.2s ease !important;
        margin-left: 8px !important;
    }
    
    .add-category-btn:hover {
        background: #d1d5db !important;
        color: #4b5563 !important;
    }
    
    /* Botón Ver todo productos */
    .ver-todo-btn {
        background:var(--accent-color);
        color:rgb(255, 255, 255) !important;
        font-size: 0.75rem !important;
        font-weight: 500 !important;
        padding: 8px 14px !important;
        border-radius: 20px !important;
        margin-left: 12px !important;
        white-space: nowrap !important;
        transition: all 0.2s ease !important;
    }
    
    .ver-todo-btn:hover {
        background: var(--color-border-muted) !important;
        border-color: #d1d5db !important;
    }
    
    /* Vista inicial sin categorías */
    .empty-catalog-container {
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 400px;
        padding: 40px 20px;
    }
    
    .empty-catalog-content {
        text-align: center;
        max-width: 400px;
        width: 100%;
    }
    
    .add-category-btn-large {
        background: var(--color-border-soft);
        color: var(--color-text-muted);
        border: 2px dashed #d1d5db;
        padding: 60px 40px;
        border-radius: 16px;
        font-size: 1.1rem;
        font-weight: 500;
        cursor: pointer;
        transition: all 0.3s ease;
        width: 100%;
        aspect-ratio: 4/5;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .add-category-btn-large:hover {
        background: var(--color-border-muted);
        border-color: #9ca3af;
        color: #4b5563;
        transform: translateY(-2px);
    }
    
    /* Modal para nueva categoría */
    .category-modal {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.6);
        z-index: 10000;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 20px;
    }
    
    .category-modal-content {
        background: var(--color-white);
        border-radius: 16px;
        padding: 32px;
        max-width: 400px;
        width: 100%;
        box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
    }
    
    .category-modal-content h3 {
        margin: 0 0 24px 0;
        font-size: 1.25rem;
        font-weight: 600;
        color: #1f2937;
        text-align: center;
    }
    
    .category-modal-content .form-group {
        margin-bottom: 24px;
    }
    
    .category-modal-content label {
        display: block;
        margin-bottom: 8px;
        font-weight: 500;
        color: var(--color-text-secondary);
        font-size: 0.875rem;
    }
    
    .category-modal-content input {
        width: 100%;
        padding: 12px 16px;
        border: 2px solid var(--color-border-muted);
        border-radius: 8px;
        font-size: 1rem;
        transition: border-color 0.2s ease;
    }
    
    .category-modal-content input:focus {
        outline: none;
        border-color: var(--color-info);
    }
    
    .category-modal-content small {
        display: block;
        margin-top: 4px;
        color: var(--color-text-muted);
        font-size: 0.75rem;
    }
    
    .category-modal-content .form-buttons {
        display: flex;
        gap: 12px;
        justify-content: flex-end;
    }
    
    .btn-create {
        background: var(--color-success-strong);
        color: var(--color-white);
        border: none;
        padding: 10px 20px;
        border-radius: 8px;
        font-weight: 500;
        cursor: pointer;
        transition: background 0.2s ease;
    }
    
    .btn-create:hover {
        background: #059669;
    }
    
    .btn-create:disabled {
        background: #9ca3af;
        cursor: not-allowed;
    }
    
    /* Vista categoría vacía - Agregar imágenes */
    .empty-category-container {
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 400px;
        padding: 40px 20px;
    }
    
    .empty-category-content {
        text-align: center;
        max-width: 400px;
        width: 100%;
    }
    
    .add-images-btn-large {
        background: var(--color-border-soft);
        color: var(--color-text-muted);
        border: 2px dashed #d1d5db;
        padding: 60px 40px;
        border-radius: 16px;
        font-size: 1.1rem;
        font-weight: 500;
        cursor: pointer;
        transition: all 0.3s ease;
        width: 100%;
        aspect-ratio: 4/5;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom:0;
    }
    
    .add-images-btn-large:hover {
        background: var(--color-border-muted);
        border-color: #9ca3af;
        color: #4b5563;
        transform: translateY(-2px);
    }
    
    .empty-category-text {
        color: var(--color-text-muted);
        font-size: 0.875rem;
        margin: 0;
        font-style: italic;
    }
    
    /* NUEVO: Estilos para empty-slot en carrusel */
    .empty-slot-container {
        display: flex;
        align-items: center;
        justify-content: center;
        aspect-ratio: 4/6.7 !important;
        padding: 40px 20px;
        width: 100%;
        background: var(--color-surface-slate);
    }
    
    .empty-slot-content {
        text-align: center;
        max-width: 400px;
        width: 100%;
    }
    
    .empty-slot .add-images-btn-large {
        background: var(--color-border-soft) !important;
        color: var(--color-text-muted) !important;
        border: 2px dashed #d1d5db !important;
        padding: 60px 40px !important;
        border-radius: 16px !important;
        font-size: 1.1rem !important;
        font-weight: 500 !important;
        cursor: pointer !important;
        transition: all 0.3s ease !important;
        width: 100% !important;
        margin-bottom: 1rem !important;
    }
    
    .empty-slot .add-images-btn-large:hover {
        background: var(--color-border-muted) !important;
        border-color: #9ca3af !important;
        color: #4b5563 !important;
        transform: translateY(-2px) !important;
    }
    
    .empty-slot-text {
        font-size: 0.9rem !important; 
        color: var(--color-text-muted) !important; 
        text-align: center !important;
        margin: 0 !important;
    }
    
    /* Vista vacía para clientes */
    .empty-client-container {
        display: flex;
        align-items: center;
        justify-content: center;
        aspect-ratio: 4/6.7 !important;
        width: 100%;
        background: linear-gradient(135deg, #fafafa 0%, var(--color-border-soft) 100%);
    }
    
    .empty-client-text {
        font-size: 1.1rem;
        color: #9ca3af;
        font-weight: 400;
        letter-spacing: 0.5px;
        margin: 0;
    }
    
    /* Modal para agregar imágenes */
    .images-modal {
        position: fixed;
        inset: 0;
        width: 100%;
        height: 100%;
        background: rgba(15, 23, 42, 0.62);
        z-index: 10000;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 20px;
        backdrop-filter: blur(4px);
    }
    
    .images-modal-content {
        background: var(--color-white);
        border: 1px solid var(--color-border-muted);
        border-radius: 18px;
        padding: 24px;
        max-width: 440px;
        width: 100%;
        height: auto;
        max-height: calc(100dvh - 40px);
        overflow-y: auto;
        align-content: normal;
        box-shadow: 0 28px 70px rgba(15, 23, 42, 0.24);
    }
    
    .images-modal-content h3 {
        margin: 0 0 6px 0;
        font-size: 1.2rem;
        font-weight: 700;
        color: #1f2937;
        text-align: left;
    }
    
    .modal-subtitle {
        text-align: left;
        color: var(--color-text-muted);
        font-size: 0.875rem;
        line-height: 1.45;
        margin: 0 0 20px 0;
    }
    
    .upload-area {
        border: 2px dashed #d1d5db;
        border-radius: 12px;
        padding: 24px 20px;
        text-align: center;
        cursor: pointer;
        transition: border-color 0.2s ease, background-color 0.2s ease, transform 0.2s ease;
        margin-bottom: 20px;
        background: #f8fafc;
    }
    
    .upload-area:hover {
        border-color: var(--accent-color, var(--color-info));
        background: color-mix(in srgb, var(--accent-color, #3b82f6) 5%, #ffffff);
        transform: translateY(-1px);
    }
    
    .upload-area.drag-over {
        border-color: var(--color-info);
        background: #eff6ff;
    }
    
    .upload-content svg {
        color: var(--accent-color, var(--color-info));
        margin-bottom: 8px;
    }
    
    .upload-content p {
        color: var(--color-text-strong, #1f2937);
        font-weight: 650;
        margin: 0 0 5px 0;
    }
    
    .upload-content small {
        color: var(--color-text-muted);
        font-size: 0.72rem;
        line-height: 1.4;
    }
    
    .selected-images h4 {
        margin: 0 0 12px 0;
        font-size: 1rem;
        color: var(--color-text-secondary);
    }
    
    .images-preview {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
        gap: 12px;
        margin-bottom: 24px;
    }

    .images-modal-content > .form-buttons {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
        margin-top: 2px;
        padding-top: 16px;
        border-top: 1px solid var(--color-border-soft);
    }

    .images-modal-content > .form-buttons :is(.btn-cancel, .btn-create) {
        min-height: 44px;
        padding: 10px 14px;
        border-radius: 10px;
        font-size: 0.86rem;
        font-weight: 650;
    }

    .images-modal-content > .form-buttons .btn-cancel {
        border: 1px solid var(--color-border-muted);
        background: #f8fafc;
        color: var(--color-text-secondary);
    }

    .images-modal-content > .form-buttons .btn-create {
        border: 1px solid var(--accent-color, var(--color-success-strong));
        background: var(--accent-color, var(--color-success-strong));
        color: #ffffff;
    }

    .images-modal-content > .form-buttons .btn-create:disabled {
        border-color: #d7dce3;
        background: #e5e7eb;
        color: #8b95a3;
        opacity: 1;
        cursor: not-allowed;
    }
    
    .image-preview-item {
        position: relative;
        aspect-ratio: 1;
        border-radius: 8px;
        overflow: hidden;
        border: 2px solid var(--color-border-muted);
    }
    
    .image-preview-item img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    @media (max-width: 480px) {
        .images-modal {
            padding: 12px;
        }

        .images-modal-content {
            max-width: 440px;
            width: 100%;
            height: auto;
            max-height: calc(100dvh - 24px);
            border-radius: 16px;
            margin: 0;
            padding: 20px;
            padding-bottom: calc(20px + env(safe-area-inset-bottom));
        }

        .images-preview {
            grid-template-columns: repeat(3, 1fr);
            gap: 8px;
        }

        .images-modal-content .form-buttons {
            position: sticky;
            bottom: calc(-20px - env(safe-area-inset-bottom));
            margin: 0 -20px calc(-20px - env(safe-area-inset-bottom));
            padding: 12px 20px calc(12px + env(safe-area-inset-bottom));
            background: rgba(255, 255, 255, 0.98);
            border-top: 1px solid var(--color-border-soft);
            box-shadow: 0 -6px 18px rgba(15, 23, 42, 0.08);
            z-index: 2;
        }
    }
     
    .image-preview-remove,
    .remove-image-btn {
        position: absolute;
        top: 4px;
        right: 4px;
        background: var(--color-danger);
        color: var(--color-white);
        border: none;
        border-radius: 50%;
        width: 20px;
        height: 20px;
        font-size: 12px;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .crop-adjusted-badge {
        position: absolute;
        bottom: 4px;
        right: 4px;
        background: var(--primary-color, #5a9a8a);
        color: var(--color-white);
        border-radius: 50%;
        width: 18px;
        height: 18px;
        font-size: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    /* Placeholder de navegación */
    .nav-placeholder {
        color: #9ca3af;
        font-size: 0.875rem;
        font-style: italic;
        padding: 0.75rem 1.5rem;
    }
    
    /* Dashboard estado vacío */
    .dashboard-empty-state {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        min-height: 400px;
        padding: 40px 20px;
    }
    
    .empty-images-section {
        width: 100%;
        max-width: 400px;
    }
    
    .empty-section-content {
        background: var(--color-surface-muted);
        border: 2px solid var(--color-border-muted);
        border-radius: 16px;
        padding: 60px 40px;
        text-align: center;
        aspect-ratio: 4/5;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
    }
    
    .empty-section-content.blocked {
        background: var(--color-border-soft);
        border-style: dashed;
        border-color: #d1d5db;
    }
    
    .blocked-overlay {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        color: #9ca3af;
    }
    
    .blocked-overlay svg {
        margin-bottom: 12px;
        opacity: 0.6;
    }
    
    .blocked-title {
        font-size: 1.1rem;
        font-weight: 500;
        margin: 0 0 4px 0;
        color: var(--color-text-muted);
    }
    
    .blocked-subtitle {
        font-size: 0.875rem;
        margin: 0;
        color: #9ca3af;
        font-style: italic;
    }
    
    /* Wrapper compartido: insets  solo por contexto (carrusel principal vs grilla). */
    .product-management-wrapper {
        position: absolute;
        display: inline-flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }

    .category-carousel .image-container .product-management-wrapper {
        bottom: 16px;
        right: auto;
        left: 16px;
        z-index: 12;
    }

    /* En la imagen abierta, las acciones viven fuera de la foto y preceden a su lista. */
    .category-carousel .product-image-footer-actions {
        position: relative;
        z-index: 6;
        display: flex;
        width: 100%;
        box-sizing: border-box;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        margin: 14px 0 0;
        padding: 0 4px;
    }

    .category-carousel .product-management-bar.product-management-wrapper {
        position: relative;
        inset: auto;
        z-index: 6;
        display: flex;
        width: auto;
        box-sizing: border-box;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        margin: 0;
        padding: 0;
    }

    .category-carousel .product-image-footer-actions .product-toggle-btn {
        position: relative !important;
        inset: auto !important;
        flex: 0 0 auto;
        margin-left: auto;
    }

    /* En la vista pública no existe la barra administrativa: el ojo vuelve
       a vivir sobre la foto y el contenedor no reserva una franja inferior. */
    body:not(.is-catalog-owner) .category-carousel .product-image-footer-actions {
        position: absolute !important;
        right: 14px !important;
        bottom: 14px !important;
        left: auto !important;
        z-index: 26 !important;
        display: block !important;
        width: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        background: transparent !important;
        pointer-events: none !important;
    }

    body:not(.is-catalog-owner) .category-carousel .product-image-footer-actions .product-toggle-btn {
        position: relative !important;
        inset: auto !important;
        margin: 0 !important;
        pointer-events: auto !important;
    }

    .category-carousel .product-management-bar .add-product-btn {
        min-height: 36px;
        padding: 8px 12px;
        border: 1px solid color-mix(in srgb, var(--accent-color, #10b981) 55%, transparent);
        box-shadow: 0 2px 8px rgba(15, 23, 42, 0.1);
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }

    body.marker-style-classic .category-carousel .classic-product-list + .product-image-footer-actions {
        margin-top: 10px;
    }

    .category-carousel .product-image-footer-actions + .product-list-container {
        margin-top: 10px;
    }
    
    /* Botón agregar producto */
    .add-product-btn {
        background: rgba(255, 255, 255, 0.96);
        color: var(--accent-color, #10b981);
        border-radius: 999px;
        padding: 7px 10px;
        min-height: 34px;
        font-size: 0.72rem;
        font-weight: 600;
        line-height: 1;
        box-shadow: 0 4px 14px rgba(15, 23, 42, 0.16);
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
        cursor: pointer;
        display: inline-flex;
        align-items: center;
        gap: 4px;
        transition: all 0.2s ease;
        border: none;
    }

    .add-product-btn:hover {
        background: rgba(255, 255, 255, 1);
      
    }

    .add-product-btn:active {
        transform: translateY(0);
    }

    .add-product-btn svg {
        flex-shrink: 0;
        width: 14px;
        height: 14px;
    }

    .add-product-ia-btn {
        display: none !important; /* Oculto temporalmente (IA) */
        background: rgba(17, 24, 39, 0.72);
        color: #ffffff;
        border: 1px solid rgba(255, 255, 255, 0.2);
        border-radius: 999px;
        padding: 4px 9px;
        min-height: 26px;
        font-size: 0.66rem;
        font-weight: 600;
        line-height: 1;
        cursor: pointer;
        backdrop-filter: blur(6px);
        -webkit-backdrop-filter: blur(6px);
    }

    .add-product-ia-btn:hover {
        background: rgba(17, 24, 39, 0.86);
    }

    .ia-item-option {
        border: 1px solid #e5e7eb;
        background: #f9fafb;
        border-radius: 10px;
        padding: 10px 12px;
        text-align: left;
        cursor: pointer;
        display: flex;
        flex-direction: column;
        gap: 2px;
    }

    .ia-item-option span {
        font-size: 12px;
        color: #6b7280;
    }

    .ia-item-option:hover {
        border-color: #9ca3af;
        background: #f3f4f6;
    }

    .product-management-empty-state {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 11;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 10px;
        cursor: pointer;
        outline: none;
        text-align: center;
    }

    .empty-product-cta-icon-wrap {
        width: 58px;
        height: 58px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.97);
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 4px 18px rgba(0, 0, 0, 0.18);
        transition: transform 0.2s ease, box-shadow 0.2s ease;
    }

    .product-management-empty-state:hover .empty-product-cta-icon-wrap,
    .product-management-empty-state:focus-visible .empty-product-cta-icon-wrap {
        box-shadow: 0 8px 22px rgba(0, 0, 0, 0.24);
    }

    .empty-product-cta-icon {
        stroke: var(--accent-color, #10b981);
    }

    .empty-product-cta-title {
        font-size: 14px;
        color: rgba(255, 255, 255, 0.98);
        font-weight: 600;
        text-shadow: 0 1px 3px rgba(0, 0, 0, 0.32);
        line-height: 1.2;
    }

    .empty-product-cta-hint {
        font-size: 11px;
        color: rgba(255, 255, 255, 0.62);
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
        line-height: 1;
    }
    
    /* BUSINESS INFO MODAL CLEAN v1 - Cache busting */
    
    .config-checkbox {
        display: flex;
        align-items: flex-start;
        gap: 12px;
        cursor: pointer;
        margin-bottom: 6px;
    }
    
    .config-checkbox input[type="checkbox"] {
        display: none;
    }
    
    .checkmark {
        width: 20px;
        height: 20px;
        border: 2px solid #d1d5db;
        border-radius: 4px;
        background: var(--color-white);
        position: relative;
        flex-shrink: 0;
        transition: all 0.2s ease;
    }
    
    .config-checkbox input[type="checkbox"]:checked + .checkmark {
        background: var(--color-success-strong);
        border-color: var(--color-success-strong);
    }
    
    .config-checkbox input[type="checkbox"]:checked + .checkmark::after {
        content: '';
        position: absolute;
        left: 6px;
        top: 2px;
        width: 6px;
        height: 10px;
        border: solid white;
        border-width: 0 2px 2px 0;
        transform: rotate(45deg);
    }
    
    .label-text {
        font-weight: 500;
        color: var(--color-text-secondary);
        margin-top: -2px;
    }
    
    .config-group small {
        color: var(--color-text-muted);
        font-size: 0.875rem;
        margin-left: 32px;
        display: block;
        margin-top: 4px;
    }

    /* Indicadores de carrusel minimalistas */
    .carousel-dots {
        display: flex;
        justify-content: center;
        gap: 0.5rem;
        margin-top: 0.5rem;
        padding: 0.5rem;
    }

    .carousel-dot {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        border: none;
        background: rgba(0, 0, 0, 0.25);
        cursor: pointer;
        transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        padding: 0;
        opacity: 0.7;
        /* Evitar selección y highlight azul */
        -webkit-user-select: none !important;
        -moz-user-select: none !important;
        -ms-user-select: none !important;
        user-select: none !important;
        -webkit-tap-highlight-color: transparent !important;
        outline: none !important;
        -webkit-touch-callout: none !important;
    }

    .carousel-dot.active {
        background: var(--accent-color);
        transform: scale(1.3);
        opacity: 1;
        box-shadow: 0 0 8px rgba(44, 90, 160, 0.3);
    }

    .carousel-dot:hover {
        background: var(--primary-light);
        transform: scale(1.15);
        opacity: 0.9;
    }

    /* Área principal */
    .catalog-main {
        padding: 0 1rem 0 1rem;
        margin-bottom: 120px;
        /* Limitar ancho máximo para contener la animación */
        max-width: 800px;
        margin: 0 auto 70px auto;
        position: relative !important;
    }
    
    /* Wrapper para contener las animaciones de transición */
    .catalog-transition-wrapper {
        position: relative;
        overflow: hidden;
    }  

    .category-container {
        opacity: 1;
        transform: translateY(0);
        /* Contener contenido dentro del contenedor */
        overflow: hidden;
        position: relative;
        z-index: 1; 
        /* Cursor normal */
        cursor: auto;
    } 

    .category-container.hidden {
        opacity: 0;
        pointer-events: none;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        visibility: hidden;
    }
    
    /* Animación de slide para cambio de categoría */
    .category-container {
        transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), 
                    opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1);
        transform: translateX(0);
    }
    
    /* Slide saliendo hacia la izquierda */
    .category-container.slide-out-left {
        transform: translateX(-100%);
        opacity: 0;
    }
    
    /* Slide saliendo hacia la derecha */
    .category-container.slide-out-right {
        transform: translateX(100%);
        opacity: 0;
    }
    
    /* Slide entrando desde la derecha */
    .category-container.slide-in-right {
        transform: translateX(100%);
        opacity: 0;
          z-index: 1; 
    }
    
    /* Slide entrando desde la izquierda */
    .category-container.slide-in-left {
        transform: translateX(-100%);
        opacity: 0;
        z-index: 1; 
    }
    
    /* Estado visible después de entrar */
    .category-container.slide-in-active {
        transform: translateX(0) !important;
        opacity: 1 !important;
    }
    
    /* Evitar parpadeos durante transiciones */
    .category-container:not(.hidden) {
        position: relative;
        visibility: visible;
    }
         
    /* ===== INTRO DE CATEGORÍA (fijo en catalog-main, detrás de los containers) ===== */
    .category-intro {
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        height: calc(100% - 35px);
        max-width: 699px;
        aspect-ratio: 4 / 6.7;
        display: flex;
        align-items: center;
        justify-content: center;
        background: var(--color-charcoal);
        z-index: 0;
        border-radius: 0;
        /* Evita que el fondo de la carátula aparezca como una línea al
           rasterizar el borde compartido con el carrusel durante zoom. */
        clip-path: inset(0 1px 0 0);
    }
    
    .category-intro-name {
        color: var(--color-white);
        font-size: 1.5rem;
        font-weight: 300;
        text-align: center;
        padding: 0 20px;
        text-transform: uppercase;
        letter-spacing: 6px;
    }
    
    @media (max-width: 768px) {
        .category-intro-name {
            font-size: 1.2rem;
            letter-spacing: 4px;
        }
    }
     
    @media (min-width: 1024px) {
        
    }
    
    /* ===== ESTILOS DE CATEGORY-INTRO ESPECÍFICOS PARA ADMIN/OWNER ===== */
    
    
    
    
    @media (max-width: 768px) {
        
    }
    
    @media (min-width: 1024px) {
        
    }
    
    /* Asegurar cursor normal en todo el contenedor */
    

    /* BOTONES DE NAVEGACIÓN DENTRO DE LA IMAGEN */
    

    

    

    

    

    

    /* Ocultar botones en una sola página */
    

    /* Botón toggle productos en esquina inferior derecha */
    
    
    
    
    
    
    /* Estado cuando productos están ocultos */
    
    
    

    /* Botón toggle grilla - ahora integrado en bottom-menu (estilos heredados) */

    /* Botón volver a carrusel (independiente, fuera de imágenes) */
    
    
    
    
    

    

    /* ===== BOTÓN GRID - Movido a bottom-menu ===== */



    /* Marca de agua MiCatalogo al final del catálogo */
    
    
    
    
    
    
    
    
    /* Ajuste responsive para móviles */
    @media (max-width: 768px) {
        
    }

    /* Responsive - Ocultar botones de navegación en móvil */
    @media (max-width: 768px) {
        
        
        
        
        

        
        
        

        

        /* Grid toggle - ahora en bottom-menu (responsive heredado) */
    }
@supports (-webkit-appearance: none) and (-ms-text-size-adjust: none) {

}@supports (-webkit-appearance: none) and (not (-webkit-overflow-scrolling: touch)) {

}
    /* ===== MENÚ INFERIOR TIPO INSTAGRAM ===== */
    

    

    

    

    

    

    

    /* Badge del carrito */
    

    

    

    /* ===== BADGE ONBOARDING ===== */
    

    

    

    /* ===== CHECKLIST ONBOARDING - MINIMALISTA ===== */
    

    

    

    

    

    

    

    

    

    

    

    /* Barra de progreso */
    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    /* Medallita de logro - Minimalista */
    

    

    

    /* Espaciado inferior para el contenido */
    

    /* Responsive para móvil */
    @media (max-width: 768px) {
        /* Badges de descuento más chicos en móvil */
        

        

        
    }

    /* Responsive para desktop - SIN limitación de ancho */
    @media (min-width: 769px) {
        /* El menú mantiene full-width en desktop */
    }




        /* Tooltip para gestión (aparece cuando no hay productos) - REMOVIDO */
        
        
        
        
        
        
        /* Botón eliminar imagen  - ahora dentro de overlay-controls-row */
         
         
       
        
        
        
        /* ===== OVERLAY EDITOR - Textos sobre imágenes ===== */
        
        /* Botón para abrir editor de overlays (ahora dentro de overlay-controls-row) */
        
        
        
        
        
        
        
        
        /* Panel del  editor de overlays */
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        /* Contenedor de controles de overlay  (T + 🏷️) - vertical arriba derecha */
        
        
        
        
        /* Botones de edición (tamaño, fuente, estilo, color, borrar) - vertical debajo de ✕, T y 🏷️ */
        
         
        
        
        
        
         
        
         
        
        
        
        
        
        
        
        
        
        
        
        /* Botón de estilo de texto (T) */
        
        
        
        
        
        
        
        
        /* Botón de color (●) */
        
        
        /* Estilos de texto para overlays */
        
        
        
        
        
        
        /* Colores para overlays */
        
        
        
        
        
        
        
        /* Overlays sobre la imagen */
        
        
        /* Clases de  fuentes para overlays */
        
        
        
        
        
        
        /* Overlays editables (modo gestión) */
        
        
        
        
        
        
        /* Handle de redimensionar */
        
        
        
        
        
        
        
        
        /* Overlays en la grilla */
        
        
        /* Estilos legacy para offer-overlay (ya no se usa, overlays son independientes) */
        
        
        
        
        
        
        
        
        /* OVERLAY-TODO: PILLS — Donde se van a agregar los pills prediseñados (descuentos, medios de pago, stickers) */
        /* OVERLAY-TODO: EDIT-PANEL — Donde se va a abrir el panel de edición completo (inputs de 3 líneas, fuentes, colores) */
        /* OVERLAY-TODO: HOTSPOT-HIDE — Donde se va a ocultar el box del hotspot cuando haya oferta vinculada */
        
        /* ===== DISCOUNT EDITOR - Ofertas por producto ===== */
        
        /* Botón para abrir editor de ofertas */
        
        
        
        
        
        
        
        
        /* Panel del editor de ofertas */
        
        
        
        
        
        
        
        
        /* Lista de productos en el panel */
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        /* Formulario de configuración de descuento */
        
        
        
        
        
        
        
        
        
        
        
        
        /* Sección de precio fijo */
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        /* Sección de rangos */
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        /* Botones de acción */
        
        
        
        
        
        
        
        
        
        
        
        
        /* Opción de agregar overlays después de guardar */
        
        
        
        
        
        
        
        
        /* Badge de descuento en hotspot */
        
        
        
        
        /* Mensaje de éxito */
        
        
        
        
        /* Responsive */
        @media (max-width: 768px) {
            
            
            
            
            
        }
        
        /* Responsive para overlays */
        @media (max-width: 768px) {
            .overlay-controls-row {
                top: 12px;
                right: 12px;
                left: auto;
                gap: 4px;
                cursor: pointer;
            }
            
            
            
             
             
            
             
            
            
            
            
            
            
            
            
            
            
            
        }
        
        /* ===== FIN OVERLAY EDITOR ===== */
        
        /* Mensaje instructivo y hints para gestión - REMOVIDOS */
        
        
        /* Lista de productos */
        
        
        /* Animación solo para primera aparición */
        
        
        
        
        
        
        
        
        /* ===== TARJETA DE PRODUCTO - DISEÑO COMPACTO 2 FILAS ===== */
        
        
        
        
        /* ===== FILA 1: Nombre (izq) + Precio (der) ===== */
        
        
        
        
        
        
        /* ===== FILA 2: Código (izq) + Botones (der) ===== */
        
        
        
        
        
        
        
        
        
        
        
        
        /* Fix para Chrome/Edge - forzar color negro en iconos de acciones */
        
        
        
        
        
        
        /* Responsive móvil */
        @media (max-width: 360px) {
            
            
            
            
            
            
            
        }
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        /* ===== SISTEMA DE NOTIFICACIONES MODERNAS ===== */
        

        

        

        

        

        

        

        

        

        

        

        

        

        

        

        

        

        

        

        

        /* ===== MODAL DE CONFIRMACIÓN MODERNO ===== */ 
        

        

        

        

        

        

        

        

        

        

        

         
 
        

        
        
        

        .modern-confirm-btn.btn-delete {
            background: var(--color-danger-soft);
            color: var(--color-danger-strong);
            border: none;
        }

     

        

        

        

        
        
        
        
        
        
        
        
        
        
        

        /* Responsive para notificaciones */
        @media (max-width: 480px) {
            

            

            
        }
        
        @media (max-width: 768px) {
            
            
            
            
            
        }
        
        /* PUNTOS DE RETIRO - CONFIGURACIÓN */
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        


            /* Carrusel continuo - Solo el contenedor de imágenes */
        
        
        /* Contenedor de imagen con posición relativa para botones */
        

        

        

        

        

        

        

        /* ===== SKELETON LOADING ===== */
        /* Wrapper para skeleton + imagen */
        

        /* Skeleton carrusel */
        

        /* Skeleton grilla */
        

        /* Skeleton base */
        

        /* Animación shimmer */
        

        

        /* Imagen dentro del wrapper */
        

        /* Imagen visible cuando cargó */
        

        /* Ocultar skeleton cuando imagen cargó */
        

        /* ===== CARRUSEL DE IMÁGENES (MODO CLIENTE) ===== */
        
        
        
        
        
        
        
         
        
        
        
        
        
        
        
        
        /* Botones de navegación del carrusel (PC) */
        
        
        
        
        
        
        
        /* Mostrar botones en PC cuando hay hover en el carrusel */
        @media (min-width: 769px) {
            
            
            
        }
        
        /* Barra de progreso del autoplay */
        
        
         
          
        
        
        
        
    
        


        /* CARRITO CENTRADO EN PANTALLA */
        

        

        

        

        

        

        

        

        

        

        

        

        

        

        

        

        

        

        

        

        

        

        

        

        

        
        
        
        
        
        
        /* ===== CATEGORÍAS CON TRANSICIÓN SUTIL ===== */
        
        
        
        
        /* Quitar espacios extra */
        
        
        /* Asegurar centrado cuando está visible */
        
        
        /* ===== BOTÓN CATEGORÍAS DESTACADO ===== */
        
        
        
        
        

        
        
        /* Estado activo - solo cambio de color */
        

        

        

        

        

        /* VISTA GRILLA */
        

        

        

        

        

        

        

        

        

        

        

        

        

        

        

        
 
        

        

        
        

        

        



.grid-display-pill:disabled,
.grid-display-pill.is-disabled {
    opacity: 0.5 !important;
    cursor: not-allowed !important;
    pointer-events: none !important;
    box-shadow: none !important;
}



        

        

        

        

        

        

        

        

        

        

        

        

        

        

        .grid-category-images {
            --grid-image-columns: 3;
            --grid-image-gap: 15px;
            display: grid !important;
            gap: 15px !important;
            align-items: stretch !important;
        }

        

        

        

        

        

        

        

        

        

       

        

        

        

        

        
 
        

        

        

        

        

        

        

        

        

        

        

        

        

        

        

        
        
        

        

        /* Responsive */
        @media (max-width: 768px) {
            
            
            

            

            

            

            

            

            .grid-category-images--all {
                grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
            }

            .grid-category-images--carousel {
                --grid-carousel-gap: -90px;
                grid-auto-columns: calc((100% - (var(--grid-carousel-gap) * 2)) / 3) !important;
            }

            

            
            
            
            
            
            
            /* Zonas más grandes en móvil para mejor touch */
            
            
            
            
          
            
            
        }

        @media (min-width: 1024px) {
            .category-intro {
                width: calc(100% - 2.2rem);
            }
        }
        
        /* ===== ESTILOS DE CATEGORY-INTRO ESPECÍFICOS PARA ADMIN/OWNER ===== */
        body.is-catalog-owner .category-intro {
            position: absolute;
            top: 0;
            left: 50%;
            transform: translateX(-50%);
            /* Altura fija basada en el aspect-ratio del image-container, no en el contenedor padre */ 
            height: auto;
            width: calc(100% - 0px);
            max-width: 699px;
            aspect-ratio: 4 / 5;
            display: flex;
            align-items: center;
            justify-content: center;
            background: var(--color-charcoal);
            z-index: 0;
            border-radius: 0;
        }
        
        body.is-catalog-owner .category-intro-name {
            color: var(--color-white);
            font-size: 1.5rem;
            font-weight: 300;
            text-align: center;
            padding: 0 20px;
            text-transform: uppercase;
            letter-spacing: 6px;
        }
        
        @media (max-width: 768px) {
            body.is-catalog-owner .category-intro-name {
                font-size: 1.2rem;
                letter-spacing: 4px;
            }
        }
        
        @media (min-width: 1024px) {
            body.is-catalog-owner .category-intro {
                width: calc(100% - 2.2rem);
            }
        }
        
        /* Asegurar cursor normal en todo el contenedor */
        .catalog-main, 
        .category-container, 
        .category-carousel,
        .carousel-track,
        .catalog-page,
        .image-container {
            cursor: auto !important;
        }

        /* BOTONES DE NAVEGACIÓN DENTRO DE LA IMAGEN */
        .nav-arrow {
            position: absolute !important;
            top: 50% !important;
            transform: translateY(-50%) !important;
            background: rgba(255, 255, 255, 0.36) !important;
            border: 2px solid #c8c8c8 !important;
            border-radius: 50% !important;
            width: 50px !important;
            height: 50px !important;
            display: flex !important;
            align-items: center !important;
            justify-content: center !important;
            cursor: pointer !important;
            z-index: 20 !important;
            color: #c8c8c8 !important;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
            opacity: 0.85 !important;
            backdrop-filter: blur(8px) !important;
            /* Evitar selección y highlight azul */
            -webkit-user-select: none !important;
            -moz-user-select: none !important;
            -ms-user-select: none !important;
            user-select: none !important;
            -webkit-tap-highlight-color: transparent !important;
            outline: none !important;
            -webkit-touch-callout: none !important;
        }

        .nav-arrow:hover {
            background: rgba(255, 255, 255, 0.6) !important;
            opacity: 1 !important;
            transform: translateY(-50%) scale(1.1) !important;
        }

        .nav-arrow:active {
            transform: translateY(-50%) scale(0.95) !important;
        }

        .nav-prev {
            left: 15px !important;
        }

        .nav-next {
            right: 15px !important;
        }

        .nav-arrow svg {
            width: 24px !important;
            height: 24px !important;
            fill: currentColor !important;
        }

        /* Ocultar botones en una sola página */
        .image-container:not([data-multi-page]) .nav-arrow {
            /*display: none !important;*/
        }
 
        /* Botón toggle productos en esquina inferior derecha */
        .product-toggle-btn {
            position: absolute !important;
            bottom: 15px !important;
            right: 15px !important;
            width: 45px !important;
            height: 45px !important;
            background: rgba(0, 0, 0, 0.7) !important;
            border: 2px solid rgba(255, 255, 255, 0.3) !important;
            border-radius: 50% !important;
            display: flex !important;
            align-items: center !important;
            justify-content: center !important;
            cursor: pointer !important;
            z-index: 25 !important;
            color: var(--color-white) !important;
            transition: all 0.3s ease !important;
            backdrop-filter: blur(5px) !important;
            /* Evitar selección y highlight azul */
            -webkit-user-select: none !important;
            -moz-user-select: none !important;
            -ms-user-select: none !important;
            user-select: none !important;
            -webkit-tap-highlight-color: transparent !important;
            outline: none !important;
            -webkit-touch-callout: none !important;
        }
        
        .product-toggle-btn:hover {
            background: rgba(0, 0, 0, 0.8) !important;
            border-color: rgba(255, 255, 255, 0.5) !important;
            transform: scale(1.05) !important;
        }
        
        .product-toggle-btn svg {
            width: 24px !important;
            height: 24px !important;
            fill: currentColor !important;
        }
        
        /* Estado cuando productos están ocultos */
        .products-hidden .product-zone {
            display: none !important;
        }
        
        .products-hidden .product-toggle-btn {
            background: rgba(220, 53, 69, 0.8) !important;
            border-color: rgba(255, 255, 255, 0.6) !important;
        }

        /* Botón toggle grilla - ahora integrado en bottom-menu (estilos heredados) */

        /* Botón volver a carrusel (independiente, fuera de imágenes) */
        .back-to-carousel-btn {
            position: fixed !important;
            bottom: calc(15px + 70px) !important; /* Arriba del menú inferior */
            right: 15px !important;
            width: 45px !important;
            height: 45px !important;
            background: rgba(0, 0, 0, 0.7) !important;
            border: 2px solid rgba(255, 255, 255, 0.3) !important;
            border-radius: 50% !important;
            color: var(--color-white) !important;
            cursor: pointer !important;
            transition: all 0.2s ease !important;
            display: flex !important;
            align-items: center !important;
            justify-content: center !important;
            z-index: 60 !important;
            /* Evitar selección y highlight azul */
            -webkit-user-select: none !important;
            -moz-user-select: none !important;
            -ms-user-select: none !important;
            user-select: none !important;
            -webkit-tap-highlight-color: transparent !important;
            outline: none !important;
            -webkit-touch-callout: none !important;
        }
        
        .back-to-carousel-btn:hover {
            background: rgba(0, 0, 0, 0.8) !important;
            border-color: rgba(255, 255, 255, 0.5) !important;
            transform: scale(1.05) !important;
        }
        
        .back-to-carousel-btn {
            font-size: 16px !important;
            font-weight: 600 !important;
        }

        .back-to-carousel-btn.hidden {
            display: none !important;
        }

        /* ===== BOTÓN GRID - Movido a bottom-menu ===== */



        /* Marca de agua MiCatalogo al final del catálogo */
        .micatalogo-footer {
            margin-top:  -54px  !important;
            margin-bottom: 60px !important;
            text-align: center !important;
            font-family: var(--font-family-ui) !important;
            font-size: 12px !important;
            color: rgba(0, 0, 0, 0.4) !important;
            font-weight: 400 !important;
            letter-spacing: 0.5px !important;
            user-select: none !important;
        }
        
        .micatalogo-footer a {
            color: inherit !important;
            text-decoration: none !important;
            transition: opacity 0.2s ease !important;
        }
        
        .micatalogo-footer a:hover {
            opacity: 0.7 !important;
        }
        
        .micatalogo-footer .ar {
            color: #25D366 !important;
        }
        
        /* Ajuste responsive para móviles */
        @media (max-width: 768px) {
            .micatalogo-footer {
                margin-top: -50px !important;
                margin-bottom: 40px !important;
                font-size: 11px !important;
            }
        }

        /* Responsive - Ocultar botones de navegación en móvil */
        @media (max-width: 768px) {
            .nav-arrow {
                display: none !important;
            }
            
            .product-toggle-btn {
                width: 40px !important;
                height: 40px !important;
                bottom: 12px !important;
                right: 12px !important;
            }
            
            .product-toggle-btn svg {
                width: 20px !important;
                height: 20px !important;
            }

            .grid-toggle-btn {
                width: 40px !important;
                height: 40px !important;
                bottom: 12px !important;
                right: 12px !important;
            }
            
            .grid-toggle-btn {
                font-size: 14px !important;
            }

            .back-to-carousel-btn {
                width: 40px !important;
                height: 40px !important;
                bottom: calc(12px + 70px) !important;
                right: 12px !important;
                font-size: 14px !important;
            }

            /* Grid toggle - ahora en bottom-menu (responsive heredado) */
        }
@supports (-webkit-appearance: none) and (-ms-text-size-adjust: none) {
    .menu-icon svg, .product-actions svg, .share-btn svg {
        fill: rgb(0 0 0) !important;
        color: inherit !important;
    }
}@supports (-webkit-appearance: none) and (not (-webkit-overflow-scrolling: touch)) {
    .menu-icon svg, .product-actions svg, .share-btn svg {
        fill: rgb(0 0 0) !important;
        color: inherit !important;
    }
}
        /* ===== MENÚ INFERIOR TIPO INSTAGRAM ===== */
        .bottom-menu {
            position: fixed !important;
            bottom: 0 !important;
            left: 0 !important;
            right: 0 !important;
            width: 100vw !important; /* Viewport width completo */
            background: rgba(255, 255, 255, 0.95) !important;
            backdrop-filter: blur(10px) !important;
            border-top: 1px solid rgba(0, 0, 0, 0.1) !important;
            z-index: 100 !important;
            padding: 0 !important;
            margin: 0 !important; /* Asegurar sin márgenes */
            transform: none !important; /* Quitar cualquier transform */
        }

        .bottom-menu-container {
            display: flex !important;
            justify-content: space-around !important;
            align-items: center !important;
            padding: 12px 1rem !important; /* Padding interno */
            max-width: 800px !important; /* Limitado como antes */
            margin: 0 auto !important; /* Centrado */
            width: 100% !important;
            user-select: none !important;
            -webkit-user-select: none !important;
            -moz-user-select: none !important;
            -ms-user-select: none !important;   
        }

        .bottom-menu-item {
            display: flex !important;
            align-items: center !important;
            justify-content: center !important;
            background: none !important;
            border: none !important;
            padding: 12px !important;
            cursor: pointer !important;
            transition: all 0.2s ease !important;
            text-decoration: none !important;
            color:rgb(15, 15, 15, 1) !important;
            min-width: 48px !important;
            min-height: 48px !important;
            border-radius: 34px !important; 
        
            -webkit-tap-highlight-color: transparent;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    
    /* Eliminar el callout de iOS */
    -webkit-touch-callout: none;
    
    /* Evitar selección de texto */
    -webkit-user-select: none;
    user-select: none;
    
    /* Eliminar outline */
    outline: none;
    border: none;
        }

        

        .menu-icon {
            position: relative !important;
            display: flex !important;
            align-items: center !important;
            justify-content: center !important;
            line-height: 1 !important;
            -webkit-tap-highlight-color: transparent;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    
    /* Eliminar el callout de iOS */
    -webkit-touch-callout: none;
    
    /* Evitar selección de texto */
    -webkit-user-select: none;
    user-select: none;
    
    /* Eliminar outline */
    outline: none;
    border: none;
            color: currentColor;
            
        }

        /* Badge del carrito */
        .cart-icon {
            position: relative !important;
        }

        .cart-badge {
            position: absolute !important;
            top: -4px !important;
            right: -6px !important;
            background: var(--color-danger) !important;
            color: var(--color-white) !important;
            border-radius: 10px !important;
            font-size: 10px !important;
            font-weight: 600 !important;
            min-width: 16px !important;
            height: 16px !important;
            display: flex !important;
            align-items: center !important;
            justify-content: center !important;
            padding: 0 4px !important;
        }

        .cart-badge.hidden {
            display: none !important;
        }

        /* ===== BADGE ONBOARDING ===== */
        .config-icon {
            position: relative !important;
        }

        .onboarding-badge {
            position: absolute !important;
            top: -5px !important;
            right: -6px !important;
            background:rgb(209, 23, 23) !important;
            color: var(--color-white) !important;
            font-size: 9px !important;
            font-weight: 600 !important;
            min-width: 16px !important;
            height: 16px !important;
            border-radius: 8px !important;
            display: flex !important;
            align-items: center !important;
            justify-content: center !important;
            padding: 0 4px !important;
        }

        .onboarding-badge.hidden {
            display: none !important;
        }

        .subscription-warning-symbol {
            color: #f59e0b !important;
            font-family: Arial, sans-serif !important;
            font-weight: 700 !important;
            line-height: 1 !important;
        }

        .subscription-warning-symbol.is-menu {
            position: absolute !important;
            top: -7px !important;
            left: -10px !important;
            z-index: 2 !important;
            font-size: 15px !important;
            filter: drop-shadow(0 0 1px var(--color-white));
            pointer-events: none !important;
        }

        /* ===== CHECKLIST ONBOARDING - MINIMALISTA ===== */
        .onboarding-checklist {
            background: #fafafa;
            border-radius: 8px;
            padding: 0;
            margin-bottom: 16px;
            overflow: hidden;
        }

        .onboarding-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 12px 14px;
            cursor: pointer;
            transition: background 0.15s;
        }

        .onboarding-header:hover {
            background: #f5f5f5;
        }

        .onboarding-header-left {
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .onboarding-title {
            font-size: 0.8rem;
            font-weight: 500;
            color: var(--color-text-secondary);
            display: flex;
            align-items: center;
            gap: 6px;
        }

        .onboarding-title-icon {
            font-size: 0.9rem;
        }

        .onboarding-progress-text {
            font-size: 0.75rem;
            color:rgb(255, 255, 255);
            font-weight: 500;
            background:rgb(218, 25, 25);
            padding: 2px 8px;
            border-radius: 10px;
        }

        .onboarding-toggle {
            background: none;
            border: none;
            color: #9ca3af;
            font-size: 0.7rem;
            cursor: pointer;
            padding: 4px;
            transition: transform 0.2s ease;
            line-height: 1;
        }

        .onboarding-checklist.expanded .onboarding-toggle {
            transform: rotate(180deg);
        }

        .onboarding-content {
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.25s ease;
            padding: 0 14px;
        }

        .onboarding-checklist.expanded .onboarding-content {
            max-height: 400px;
            padding: 0 14px 14px 14px;
        }

        /* Barra de progreso */
        .onboarding-progress-bar-header {
            height: 2px;
            background: var(--color-border-muted);
        }

        .onboarding-progress-fill {
            height: 100%;
            background: var(--color-success);
            transition: width 0.4s ease;
        }

        .onboarding-steps {
            display: flex;
            flex-direction: column;
            gap: 2px;
        }

        .onboarding-step {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 10px 8px;
            background: transparent;
            border-radius: 6px;
            cursor: pointer;
            transition: background 0.15s;
        }

        .onboarding-step:hover {
            background: #f0f0f0;
        }

        .onboarding-step.completed {
            opacity: 0.6;
        }

        .onboarding-step.completed:hover {
            background: transparent;
            cursor: default;
        }

        .onboarding-check {
            width: 18px;
            height: 18px;
            border-radius: 50%;
            border: 1.5px solid #d1d5db;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            transition: all 0.2s ease;
            background: var(--color-white);
        }

        .onboarding-step.completed .onboarding-check {
            background: var(--color-success);
            border-color: var(--color-success);
        }

        .onboarding-check-icon {
            color: var(--color-white);
            font-size: 10px;
            opacity: 0;
            transform: scale(0);
            transition: all 0.2s ease;
        }

        .onboarding-step.completed .onboarding-check-icon {
            opacity: 1;
            transform: scale(1);
        }

        .onboarding-step-content {
            flex: 1;
        }

        .onboarding-step-title {
            font-size: 0.8rem;
            font-weight: 500;
            color: var(--color-text-secondary);
        }

        .onboarding-step.completed .onboarding-step-title {
            color: var(--color-text-muted);
            text-decoration: line-through;
            text-decoration-color: #d1d5db;
        }

        .onboarding-step-desc {
            font-size: 0.7rem;
            color: #9ca3af;
            margin-top: 1px;
        }

        .onboarding-step.completed .onboarding-step-desc {
            display: none;
        }

        .onboarding-step-arrow {
            color: #d1d5db;
            font-size: 0.8rem;
            transition: all 0.15s;
        }

        .onboarding-step:hover .onboarding-step-arrow {
            transform: translateX(2px);
            color: #9ca3af;
        }

        .onboarding-step.completed .onboarding-step-arrow {
            display: none;
        }

        /* Medallita de logro - Minimalista */
        .onboarding-completed-badge {
            display: flex;
            align-items: center;
            gap: 8px;
            background: #f0fdf4;
            border-radius: 6px;
            padding: 10px 12px;
            margin-bottom: 14px;
        }

        .onboarding-completed-icon {
            font-size: 1rem;
        }

        .onboarding-completed-text {
            font-size: 0.8rem;
            font-weight: 500;
            color: #166534;
        }

        /* ===== FRANJA DE LOGROS ===== */
        #business-config-modal .config-modal-tabs {
            position: relative;
        }

        .achievement-strip {
            display: flex;
            align-items: center;
            gap: 8px;
            margin: 0 24px 10px;
            padding: 7px 9px;
            border: 1px solid var(--color-border-muted);
            border-radius: 10px;
            background: var(--color-surface-slate);
            flex-shrink: 0;
        }

        .achievement-strip-heading {
            display: flex;
            width: 70px;
            min-width: 70px;
            flex-direction: column;
            gap: 1px;
        }

        .achievement-strip-heading > span {
            color: var(--color-text-strong);
            font-size: 0.66rem;
            font-weight: 750;
            letter-spacing: 0.05em;
            text-transform: uppercase;
        }

        .achievement-strip-heading small {
            color: var(--color-text-muted);
            font-size: 0.5rem;
            line-height: 1.2;
        }

        .achievement-grid {
            display: grid;
            min-width: 0;
            flex: 1;
            grid-auto-columns: 58px;
            grid-auto-flow: column;
            justify-content: start;
            gap: 6px;
            overflow-x: auto;
            overscroll-behavior-x: contain;
            scrollbar-width: none;
        }

        .achievement-grid::-webkit-scrollbar {
            display: none;
        }

        .achievement-card {
            display: grid;
            width: 58px;
            height: 58px;
            padding: 4px 3px;
            border: 1px solid var(--color-border-muted);
            border-radius: 8px;
            background: var(--color-surface-base);
            color: var(--color-text-secondary);
            cursor: pointer;
            place-items: center;
            grid-template-rows: 24px auto auto;
            transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
        }

        .achievement-card:hover {
            border-color: var(--accent-color);
            box-shadow: 0 6px 16px rgba(15, 23, 42, 0.1);
            transform: translateY(-1px);
        }

        .achievement-card:focus-visible {
            outline: 2px solid var(--accent-color);
            outline-offset: 2px;
        }

        .achievement-medal {
            position: relative;
            display: inline-flex;
            width: 23px;
            height: 23px;
            align-items: center;
            justify-content: center;
            border: 1px solid var(--color-border-subtle);
            border-radius: 7px;
            background: var(--color-surface-soft);
            color: var(--color-text-muted);
        }

        .achievement-medal svg,
        .achievement-detail-icon svg {
            width: 14px;
            height: 14px;
            fill: currentColor;
        }

        .achievement-medal-check {
            position: absolute;
            right: -4px;
            bottom: -3px;
            display: inline-flex;
            width: 12px;
            height: 12px;
            align-items: center;
            justify-content: center;
            border: 2px solid var(--color-surface-base);
            border-radius: 50%;
            background: var(--color-success-strong);
            color: var(--color-white);
            font-size: 7px;
            font-weight: 800;
        }

        .achievement-card-title {
            overflow: hidden;
            max-width: 100%;
            color: var(--color-text-secondary);
            font-size: 0.54rem;
            font-weight: 700;
            line-height: 1.05;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .achievement-card-meta {
            overflow: hidden;
            max-width: 100%;
            color: var(--color-text-muted);
            font-size: 0.46rem;
            font-weight: 600;
            line-height: 1;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .achievement-card.level-progress .achievement-medal {
            border-color: color-mix(in srgb, var(--accent-color) 55%, var(--color-border-muted));
            background: color-mix(in srgb, var(--accent-color) 10%, var(--color-surface-base));
            color: var(--accent-color);
        }

        .achievement-card.level-complete .achievement-medal {
            border-color: #f59e0b;
            background: #fffbeb;
            color: #d97706;
        }

        .achievement-card.level-bronze .achievement-medal {
            border-color: #b7793d;
            background: #fff7ed;
            color: #9a5b22;
        }

        .achievement-card.level-silver .achievement-medal {
            border-color: #94a3b8;
            background: #f8fafc;
            color: #64748b;
        }

        .achievement-card.level-gold .achievement-medal {
            border-color: #f59e0b;
            background: #fffbeb;
            color: #d97706;
        }

        .achievement-card.level-platinum .achievement-medal {
            border-color: #22d3ee;
            background: #ecfeff;
            color: #0891b2;
        }

        .achievement-card.level-locked {
            opacity: 0.78;
        }

        .achievement-detail-overlay {
            position: absolute;
            z-index: 20;
            inset: 0;
            display: none;
            align-items: center;
            justify-content: center;
            padding: 18px;
            background: rgba(15, 23, 42, 0.46);
            backdrop-filter: blur(3px);
        }

        .achievement-detail-overlay.is-open {
            display: flex;
        }

        .achievement-detail-dialog {
            position: relative;
            width: min(100%, 360px);
            max-height: calc(100% - 18px);
            overflow-y: auto;
            padding: 20px;
            border: 1px solid var(--color-border-muted);
            border-radius: 14px;
            background: var(--color-surface-base);
            box-shadow: 0 18px 46px rgba(15, 23, 42, 0.22);
            box-sizing: border-box;
        }

        .achievement-detail-close {
            position: absolute;
            top: 12px;
            right: 12px;
            display: inline-flex;
            width: 30px;
            height: 30px;
            align-items: center;
            justify-content: center;
            padding: 0;
            border: 1px solid var(--color-border-muted);
            border-radius: 8px;
            background: var(--color-surface-soft);
            color: var(--color-text-muted);
            font-size: 1.1rem;
            line-height: 1;
            cursor: pointer;
        }

        .achievement-detail-header {
            display: flex;
            align-items: center;
            gap: 12px;
            padding-right: 34px;
        }

        .achievement-detail-icon {
            display: inline-flex;
            width: 44px;
            height: 44px;
            align-items: center;
            justify-content: center;
            border: 1px solid var(--color-border-subtle);
            border-radius: 12px;
            background: var(--color-surface-soft);
            color: var(--accent-color);
            flex: 0 0 auto;
        }

        .achievement-detail-kicker {
            display: block;
            margin-bottom: 3px;
            color: var(--color-text-muted);
            font-size: 0.62rem;
            font-weight: 750;
            letter-spacing: 0.06em;
            text-transform: uppercase;
        }

        .achievement-detail-header h4 {
            margin: 0;
            color: var(--color-text-strong);
            font-size: 1rem;
        }

        .achievement-detail-description {
            margin: 16px 0 14px;
            color: var(--color-text-secondary);
            font-size: 0.8rem;
            line-height: 1.5;
        }

        .achievement-progress-copy {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 6px;
            color: var(--color-text-muted);
            font-size: 0.68rem;
        }

        .achievement-progress-copy strong {
            color: var(--color-text-secondary);
        }

        .achievement-progress-track {
            height: 6px;
            overflow: hidden;
            border-radius: 999px;
            background: var(--color-surface-soft-2);
        }

        .achievement-progress-track span {
            display: block;
            height: 100%;
            border-radius: inherit;
            background: var(--accent-color);
            transition: width 0.3s ease;
        }

        .achievement-detail-tasks {
            display: grid;
            gap: 7px;
            margin-top: 16px;
        }

        .achievement-task {
            display: flex;
            align-items: center;
            gap: 9px;
            min-height: 34px;
            padding: 7px 9px;
            border: 1px solid var(--color-border-muted);
            border-radius: 8px;
            background: var(--color-surface-muted);
            color: var(--color-text-secondary);
            font-size: 0.72rem;
        }

        .achievement-task-status {
            display: inline-flex;
            width: 17px;
            height: 17px;
            align-items: center;
            justify-content: center;
            border: 1px solid var(--color-border-subtle);
            border-radius: 50%;
            color: var(--color-white);
            font-size: 9px;
            font-weight: 800;
            flex: 0 0 auto;
        }

        .achievement-task.is-done .achievement-task-status {
            border-color: var(--color-success-strong);
            background: var(--color-success-strong);
        }

        .achievement-task.is-done span:last-child {
            color: var(--color-text-muted);
        }

        .achievement-detail-hint,
        .achievement-detail-success {
            padding: 10px 12px;
            border: 1px solid var(--color-border-muted);
            border-radius: 8px;
            background: var(--color-surface-muted);
            color: var(--color-text-secondary);
            font-size: 0.72rem;
            line-height: 1.45;
        }

        .achievement-detail-success {
            border-color: color-mix(in srgb, var(--color-success-strong) 45%, var(--color-border-muted));
            background: var(--color-success-soft);
            color: var(--color-success-strong);
        }

        .achievement-detail-action {
            display: inline-flex;
            width: 100%;
            min-height: 42px;
            align-items: center;
            justify-content: center;
            margin-top: 18px;
            padding: 10px 14px;
            border: 0;
            border-radius: 9px;
            background: var(--accent-color);
            color: var(--accent-contrast-color);
            font-size: 0.8rem;
            font-weight: 750;
            cursor: pointer;
        }

        .achievement-detail-action:hover {
            filter: brightness(0.96);
        }

        .achievement-detail-action:focus-visible,
        .achievement-detail-close:focus-visible {
            outline: 2px solid var(--accent-color);
            outline-offset: 2px;
        }

        @media (max-width: 480px) {
            .achievement-strip {
                gap: 6px;
                margin-right: 16px;
                margin-left: 16px;
                padding: 6px 7px;
            }

            .achievement-strip-heading {
                width: 54px;
                min-width: 54px;
            }

            .achievement-strip-heading small {
                display: none;
            }

            .achievement-grid {
                grid-auto-columns: 54px;
                gap: 5px;
            }

            .achievement-card {
                width: 54px;
                height: 54px;
            }

            .achievement-detail-overlay {
                align-items: flex-end;
                padding: 10px;
            }

            .achievement-detail-dialog {
                width: 100%;
                max-height: 88%;
                border-radius: 14px;
            }
        }

        /* Espaciado inferior para el contenido */
        body {
            padding-bottom: 70px !important; /* Espacio para el menú */
        }

        /* Responsive para móvil */
        @media (max-width: 768px) {
            /* Badges de descuento más chicos en móvil */
            .discount-badge {
                width: 164.7px !important;
    height: 21.5px ;
            }

            .discount-badge div:first-child {
                font-size: 0.6rem !important;
            }

            .discount-badge div:last-child {
                font-size: 1.5rem !important;
            }
        }

        /* Responsive para desktop - SIN limitación de ancho */
        @media (min-width: 769px) {
            /* El menú mantiene full-width en desktop */
        }



        /* Tooltip para gestión (aparece cuando no hay productos) - REMOVIDO */
        .management-tooltip {
            display: none !important;
            font-weight: 500;
            white-space: nowrap;
            box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
            display: none;
            animation: tooltipBounce 2s ease-in-out infinite;
        }
        
        .management-tooltip.show {
            display: block;
        }
        
        @keyframes tooltipBounce {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(-5px); }
        }
        
        /* Botón eliminar imagen - ahora dentro de overlay-controls-row */
        .delete-image-btn {
            position: relative;
            top: auto;
            right: auto;
            background: rgba(255, 255, 255, 1);
            color: rgb(255, 95, 95);
            border: none;
            border-radius: 50%;
            width: 36px;
            -webkit-user-select: none;
            user-select: none;
            height: 36px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.2s ease;
            opacity: 0.7;
            pointer-events: auto;
            touch-action: manipulation;
            -webkit-tap-highlight-color: transparent;
            user-select: none;
        } 
         
       
        
        .delete-image-btn svg {
            flex-shrink: 0;
        }
        
        /* ===== OVERLAY EDITOR - Textos sobre imágenes ===== */
        
        /* Botón para abrir editor de overlays (ahora dentro de overlay-controls-row) */
        .overlay-editor-btn {
            position: relative;
            top: auto;
            left: auto;
            background: rgba(0, 0, 0, 0.6);
            color: var(--color-white);
            border: none;
            border-radius: 50%;
            width: 36px;
            height: 36px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.2s ease;
            opacity: 0.8;
            flex-shrink: 0;
            pointer-events: auto;
            touch-action: manipulation;
            -webkit-tap-highlight-color: transparent;
            user-select: none;
        }
        
        .overlay-editor-btn:hover {
            background: rgba(0, 0, 0, 0.85);
            opacity: 1;
        }
        
        .overlay-editor-btn.active {
            background: #8b5cf6;
            opacity: 1;
        }
        
        .overlay-editor-btn svg {
            width: 18px;
            height: 18px;
            fill: currentColor;
        }
        
        /* Panel del editor de overlays */
        .overlay-editor-panel {
            position: absolute;
            top: 52px;
            right: 52px;
            left: auto;
            background: rgba(0, 0, 0, 0.85);
            backdrop-filter: blur(10px);
            border-radius: 12px;
            padding: 16px;
            z-index: 15;
            display: none;
            flex-direction: column;
            gap: 8px;
            min-width: 200px;
            max-width: 300px;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
            pointer-events: auto;
        }
        
        .overlay-editor-panel.show {
            display: flex;
        }
        
        .overlay-editor-panel .input-row {
            display: flex;
            gap: 8px;
        }
        
        .overlay-editor-panel input[type="text"] {
            flex: 1;
            background: rgba(255, 255, 255, 0.1);
            border: 1px solid rgba(255, 255, 255, 0.2);
            border-radius: 8px;
            padding: 8px 12px;
            color: var(--color-white);
            font-size: 14px;
            outline: none;
            transition: border-color 0.2s;
        }
        
        .overlay-editor-panel input[type="text"]:focus {
            border-color: rgba(139, 92, 246, 0.6);
        }
        
        .overlay-editor-panel input[type="text"]::placeholder {
            color: rgba(255, 255, 255, 0.5);
        }
        
        .overlay-add-btn {
            background: #8b5cf6;
            color: var(--color-white);
            border: none;
            border-radius: 8px;
            padding: 8px 14px;
            font-size: 13px;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.2s;
            white-space: nowrap;
        }
        
        .overlay-add-btn:hover:not(:disabled) {
            background: #7c3aed;
        }
        
        .overlay-add-btn:disabled {
            background: rgba(139, 92, 246, 0.4);
            cursor: not-allowed;
        }
        
        .overlay-limit-warning {
            color: #fbbf24;
            font-size: 11px;
            text-align: center;
            padding: 4px 0;
            display: none;
        }
        
        .overlay-limit-warning.show {
            display: block;
        }
        
        /* Contenedor de controles de overlay  (T + 🏷️) - vertical arriba derecha */
        .overlay-controls-row {
            position: absolute;
            top: 15px;
            right: 15px;
            left: auto;
            display: flex;
            flex-direction: column;
            align-items: flex-end;
            gap: 6px;
            z-index: 10;
            pointer-events: none;
        }
        
        .overlay-top-row {
            display: flex;
            flex-direction: row;
            align-items: center;
            gap: 6px;
        }

        /* Confirmación mínima del guardado de textos, sin toast ni bloqueo. */
        .overlay-save-status {
            position: absolute;
            top: 18px;
            right: 96px;
            z-index: 11;
            display: inline-flex;
            align-items: center;
            min-height: 16px;
            padding: 2px 7px;
            border: 1px solid rgba(255, 255, 255, 0.12);
            border-radius: 999px;
            background: rgba(15, 23, 42, 0.58);
            color: rgba(255, 255, 255, 0.78);
            font-size: 9px;
            font-weight: 500;
            line-height: 1.2;
            letter-spacing: 0.01em;
            white-space: nowrap;
            opacity: 0;
            transform: translateY(-2px);
            transition: opacity 0.18s ease, transform 0.18s ease;
            pointer-events: none;
        }

        .overlay-save-status.is-visible {
            opacity: 0.72;
            transform: translateY(0);
        }

        .overlay-save-status.is-saved {
            opacity: 0.5;
        }

        .overlay-save-status.is-error {
            border-color: rgba(248, 113, 113, 0.25);
            color: #fecaca;
            opacity: 0.9;
        }
        
        /* Botones de edición (tamaño, fuente, estilo, color, borrar) - vertical debajo de ✕, T y 🏷️ */
        .overlay-edit-controls {
            position: absolute;
            top: 170px;
            right: 18px;
            left: auto;
            display: none;
            flex-direction: column;
            gap: 4px;
            z-index: 10;
            border-radius: 20px;
        }
         
        .overlay-edit-controls.show {
            display: flex;
        }
        
        .overlay-edit-btn {
            background: rgba(0, 0, 0, 0.6);
            color: var(--color-white);
            border: none;
            border-radius: 50%;
            width: 32px;
            height: 32px;
            font-size: 16px;
            font-weight: bold;
            cursor: pointer;
            transition: all 0.2s;
            display: flex;
            align-items: center;
            justify-content: center;
            opacity: 0.8;
            pointer-events: auto;
            touch-action: manipulation;
            -webkit-tap-highlight-color: transparent;
            user-select: none;
        }
        
        .overlay-edit-btn a { 
            margin-bottom: 7px;
            font-size: 30px !important;
        } 
        
        .overlay-edit-btn:hover {
            background: rgba(0, 0, 0, 0.85);
            opacity: 1;
        } 
        
        .overlay-edit-btn:active {
        }
        
        .overlay-font-btn {
            font-family: 'Georgia', serif;
            font-style: italic;
        }
        
        .overlay-delete-btn {
            border: 1px solid rgba(239, 68, 68, 0.5);
            background: rgba(220, 38, 38, 0.8);
        }
        
        .overlay-delete-btn:hover {
            background: rgba(220, 38, 38, 0.8);
            border-color: rgba(239, 68, 68, 0.8);
        }
        
        .overlay-delete-btn svg {
            width: 14px;
            height: 14px;
            fill: currentColor;
        }
        
        /* Botón de estilo de texto (T) */
        .overlay-style-btn {
            font-weight: 700;
            font-size: 14px;
            font-family: Arial, sans-serif;
        }
        
        .overlay-style-btn[data-style="strikethrough"] {
            text-decoration: line-through;
        }
        
        .overlay-style-btn[data-style="underline"] {
            text-decoration: underline;
        }
        
        .overlay-style-btn[data-style="bullet"]::before {
            content: '•';
            margin-right: 2px;
        }
        
        /* Botón de color (●) */
        .overlay-color-btn {
            font-size: 16px;
            line-height: 1;
        }
        
        /* Estilos de texto para overlays */
        .image-overlay.style-strikethrough {
            text-decoration: line-through;
        }
        
        .image-overlay.style-underline {
            text-decoration: underline;
        }
        
        .image-overlay.style-bullet::before {
            content: '• ';
        }
        
        /* Colores para overlays */
        .image-overlay.color-white { color: var(--color-white); }
        .image-overlay.color-pink { color: #ec4899; }
        .image-overlay.color-orange { color: #f97316; }
        .image-overlay.color-green { color: var(--color-success); }
        .image-overlay.color-cyan { color: #06b6d4; }
        .image-overlay.color-red { color: var(--color-danger); }
        
        /* Overlays sobre la imagen */
        .image-overlay { 
            position: absolute;
            color: var(--color-white);
            font-weight: 700;
            text-shadow: 
                0 2px 4px rgba(0, 0, 0, 0.1),
                0 0 20px rgba(0, 0, 0, 0.1);
            white-space: nowrap;
            cursor: default;
            pointer-events: none;
            user-select: none;
            z-index: 5;
            transform: translate(-50%, -50%);
            /* Fuente por defecto - se sobrescribe con data-font */
            font-family: 'Anton', sans-serif;
            /* OVERLAY-TODO: COLORS — Donde se va a agregar selector de colores (por ahora todo blanco) */
            /* OVERLAY-TODO: MULTI-LINE — Donde el overlay va a soportar hasta 3 líneas con tamaños independientes */
        }
        
        /* Clases de  fuentes para overlays */
        .image-overlay.font-anton { font-family: 'Anton', sans-serif; }
        .image-overlay.font-bebas { font-family: 'Bebas Neue', sans-serif; }
        .image-overlay.font-playfair { font-family: 'Playfair Display', serif; font-weight: 700; }
        .image-overlay.font-montserrat { font-family: 'Montserrat', sans-serif; font-weight: 700; }
        .image-overlay.font-marker { font-family: 'Permanent Marker', cursive; }
        
        /* Overlays editables (modo gestión) */
        .image-overlay.editable {
            cursor: grab;
            pointer-events: auto;
            transition: transform 0.1s ease, box-shadow 0.2s ease;
        }
        
        .image-overlay.editable:active {
            cursor: grabbing;
        }
        
        .image-overlay.editable.selected {
            outline: 2px dashed rgba(174, 174, 174, 0.7);
            outline-offset: 8px;
            border-radius: 0.9px;
        }
        
        /* Handle de redimensionar */
        .overlay-resize-handle {
            position: absolute;
            bottom: -12px;
            right: -12px;
            width: 20px;
            height: 20px;
            background: rgba(139, 92, 246, 0.9);
            border: 2px solid white;
            border-radius: 4px;
            cursor: nwse-resize;
            display: none;
            z-index: 25;
            box-shadow: 0 2px 6px rgba(0,0,0,0.3);
            touch-action: none;
        }
        
        .overlay-resize-handle::before {
            content: '';
            position: absolute;
            bottom: 3px;
            right: 3px;
            width: 8px;
            height: 8px;
            border-right: 2px solid white;
            border-bottom: 2px solid white;
        }
        
        .image-overlay.editable.selected .overlay-resize-handle {
            display: block;
        }
        
        .image-overlay.editable.dragging {
            opacity: 0.8;
            transform: translate(-50%, -50%) scale(1.05);
            z-index: 20;
        }
        
        /* Overlays en la grilla */
        .grid-item .image-overlay {
            pointer-events: none;
        }
        
        /* Estilos legacy para offer-overlay (ya no se usa, overlays son independientes) */
        .image-overlay.offer-overlay {
            white-space: normal;
            text-align: center;
            line-height: 1.2;
        }
        
        .image-overlay.offer-overlay .offer-line-old {
            font-size: 0.5em;
            text-decoration: line-through;
            opacity: 0.8;
            display: block;
        }
        
        .image-overlay.offer-overlay .offer-line-price {
            font-size: 1em;
            display: block;
            color: var(--color-white);
            text-shadow: 
                0 2px 4px rgba(0, 0, 0, 0.6),
                0 0 20px rgba(0, 0, 0, 0.3);
        }
        
        .image-overlay.offer-overlay .offer-line-name {
            font-size: 0.4em;
            opacity: 0.9;
            display: block;
            margin-top: 2px;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }
        
        /* OVERLAY-TODO: PILLS — Donde se van a agregar los pills prediseñados (descuentos, medios de pago, stickers) */
        /* OVERLAY-TODO: EDIT-PANEL — Donde se va a abrir el panel de edición completo (inputs de 3 líneas, fuentes, colores) */
        /* OVERLAY-TODO: HOTSPOT-HIDE — Donde se va a ocultar el box del hotspot cuando haya oferta vinculada */
        
        /* ===== DISCOUNT EDITOR - Ofertas por producto ===== */
        
        /* Botón para abrir editor de ofertas */
        .discount-editor-btn {
            position: relative;
            background: rgba(0, 0, 0, 0.6);
            color: var(--color-white);
            border: none;
            border-radius: 50%;
            width: 36px;
            height: 36px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.2s ease;
            opacity: 0.8;
            pointer-events: auto;
            touch-action: manipulation;
            -webkit-tap-highlight-color: transparent;
            user-select: none;
        }
        
        .discount-editor-btn:hover {
            background: rgba(0, 0, 0, 0.85);
            opacity: 1;
        }
        
        .discount-editor-btn.active {
            background: var(--color-success);
            opacity: 1;
        }
        
        .discount-editor-btn svg {
            width: 18px;
            height: 18px;
            fill: currentColor;
        }
        
        /* Panel del editor de ofertas */
        .discount-editor-panel {
            position: absolute;
            top: 90px;
            right: 45px;
            left: auto;
            background: rgba(255, 255, 255, 0.92);
            backdrop-filter: blur(10px);
            border-radius: 12px;
            padding: 16px;
            z-index: 15;
            display: none;
            flex-direction: column;
            gap: 12px;
            min-width: 280px;
            max-width: 340px;
            max-height: 70vh;
            overflow-y: auto;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
            pointer-events: auto;
        }
        
        .discount-editor-panel.show {
            display: flex;
        }
        
        .discount-panel-title {
            color: black;
            font-size: 14px;
            font-weight: 600;
            margin-bottom: 4px;
            display: flex;
            align-items: center;
            gap: 8px;
        }
        
        .discount-panel-title svg {
            width: 16px;
            height: 16px;
            fill: var(--color-success);
        }
        
        /* Lista de productos en el panel */
        .discount-products-list {
            display: flex;
            flex-direction: column;
            gap: 8px;
        }
        
        .discount-product-item {
            background: rgba(116, 116, 116, 0.08);
            border-radius: 8px;
            padding: 10px 12px;
            cursor: pointer;
            transition: all 0.2s;
            border: 1px solid transparent;
        }
        
        .discount-product-item:hover {
            background: rgba(73, 73, 73, 0.12);
        }
        
        .discount-product-item.selected {
            border-color: var(--color-success);
            background: rgba(34, 197, 94, 0.15);
        }
        
        .discount-product-item.has-discount {
            border-color: rgba(34, 197, 94, 0.5);
        }
        
        .discount-product-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 0;
        }
        
        .discount-product-name {
            color: black;
            font-size: 13px;
            font-weight: 500;
            flex: 1;
        }
        
        .discount-product-code {
            color: rgba(0, 0, 0, 0.5);
            font-size: 11px;
        }
        
        .discount-product-price {
            color: rgba(0, 0, 0, 0.7);
            font-size: 12px;
            margin-top: 2px;
        }
        
        .discount-badge {
            background: var(--color-success);
            color: var(--color-white);
            font-size: 10px;
            font-weight: 600;
            padding: 2px 6px;
            border-radius: 4px;
            white-space: nowrap;
        }
        
        .discount-badge.ranges {
            background: #8b5cf6;
        }
        
        /* Formulario de configuración de descuento */
        .discount-config-form {
            display: none;
            flex-direction: column;
            gap: 12px;
            padding-top: 0;
            border-top: 1px solid rgba(255, 255, 255, 0.1);
        }
        
        .discount-config-form.show {
            display: flex;
        }
        
        .discount-type-selector {
            display: flex;
            gap: 8px;
        }
        
        .discount-type-btn {
            flex: 1;
            background: rgba(116, 116, 116, 0.1);
            color: rgba(48, 48, 48, 0.7);
            border: 1px solid rgba(255, 255, 255, 0.2);
            border-radius: 8px;
            padding: 10px 8px;
            font-size: 12px;
            cursor: pointer;
            transition: all 0.2s;
            text-align: center;
        }
        
        .discount-type-btn:hover {
            background: rgba(255, 255, 255, 0.15);
        }
        
        .discount-type-btn.active {
            background: rgba(34, 197, 94, 0.2);
            border-color: var(--color-success);
            color: black; 
        }
        
        /* Sección de precio fijo */
        .discount-fixed-section {
            display: none;
            flex-direction: column;
            gap: 0;
        }
        
        .discount-fixed-section.show {
            display: flex;
        }
        
        .discount-input-group {
            display: flex;
            align-items: center;
            gap: 8px;
        }
        
        .discount-input-label {
            color: rgba(44, 44, 44, 0.7);
            font-size: 12px;
            min-width: 80px;
        }
        
        .discount-input {
            flex: 1;
            background: rgba(255, 255, 255, 0.1);
            border: 1px solid rgba(46, 46, 46, 0.2);
            border-radius: 6px;
            padding: 8px 10px;
            color: rgb(49, 49, 49);
            font-size: 10px; 
            outline: none;
            transition: border-color 0.2s;
        }
        
        .discount-input:focus {
            border-color: var(--color-success);
        }
        
        .discount-input::placeholder {
            color: rgba(49, 49, 49, 0.4);
        }
        
        .discount-calc-result {
            color: var(--color-success);
            font-size: 13px;
            font-weight: 500;
            text-align: right;
        }
        
        /* Sección de rangos */
        .discount-ranges-section {
            display: none;
            flex-direction: column;
            gap: 8px;
        }
        
        .discount-ranges-section.show {
            display: flex;
        }
        
        .discount-range-row {
            display: flex;
            align-items: center;
            gap: 6px;
            background: rgba(255, 255, 255, 0.05);
            padding: 0;
            border-radius: 6px;
        }
        
        .discount-range-row input {
            width: 50px;
            background: rgba(255, 255, 255, 0.1);
            border: 1px solid rgba(26, 26, 26, 0.2);
            border-radius: 4px;
            padding: 6px 8px;
            color: rgb(2, 2, 2);
            font-size: 12px;
            text-align: center; 
            outline: none;
        }
        
        .discount-range-row input:focus {
            border-color: #8b5cf6;
        }
        
        .discount-range-label {
            color: rgba(36, 36, 36, 0.6);
            font-size: 11px;
        }
        
        .discount-range-delete {
            background: transparent;
            border: none;
            color: rgba(239, 68, 68, 0.7);
            cursor: pointer;
            padding: 4px;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: color 0.2s;
        }
        
        .discount-range-delete:hover {
            color: var(--color-danger);
        }
        
        .discount-add-range-btn {
            background: rgba(255, 255, 255, 0.2);
            border: 1px dashed rgba(80, 80, 80, 0.5);
            border-radius: 6px;
            color:rgb(102, 102, 102);
            padding: 8px;
            font-size: 12px;
            cursor: pointer;
            transition: all 0.2s;
        }
        
        .discount-add-range-btn:hover {
            background: rgba(139, 92, 246, 0.3);
            border-color: #8b5cf6;
        }
        
        /* Botones de acción */
        .discount-actions {
            display: flex;
            gap: 8px;
            margin-top: 4px;
        }
        
        .discount-save-btn {
            flex: 1;
            background: var(--color-success);
            color: var(--color-white);
            border: none;
            border-radius: 8px;
            padding: 10px 16px;
            font-size: 13px;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.2s;
        }
        
        .discount-save-btn:hover {
            background: #16a34a;
        }
        
        .discount-save-btn:disabled {
            background: rgba(34, 197, 94, 0.4);
            cursor: not-allowed;
        }
        
        .discount-remove-btn {
            background: rgba(239, 68, 68, 0.2);
            color: #f87171;
            border: 1px solid rgba(239, 68, 68, 0.3);
            border-radius: 8px;
            padding: 10px 12px;
            font-size: 13px;
            cursor: pointer;
            transition: all 0.2s;
        }
        
        .discount-remove-btn:hover {
            background: rgba(239, 68, 68, 0.3);
            border-color: var(--color-danger);
        }
        
        /* Opción de agregar overlays después de guardar */
        .discount-overlay-prompt {
            display: none;
            padding: 8px 0;
        }
        
        .discount-overlay-prompt.show {
            display: block;
        }
        
        .discount-overlay-yes {
            width: 100%;
            padding: 10px 16px;
            border-radius: 6px;
            font-size: 13px;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.2s;
            background: rgba(139, 92, 246, 0.2);
            color: #c4b5fd;
            border: 1px solid rgba(139, 92, 246, 0.4);
        }
        
        .discount-overlay-yes:hover {
            background: rgba(139, 92, 246, 0.3);
            border-color: rgba(139, 92, 246, 0.6);
        }
        
        /* Badge de descuento en hotspot */
        .product-discount-badge {
            position: absolute;
            top: -6px;
            right: -6px;
            background: var(--color-success);
            color: var(--color-white);
            font-size: 9px;
            font-weight: 700;
            padding: 2px 4px;
            border-radius: 4px;
            min-width: 16px;
            text-align: center;
            z-index: 5;
            box-shadow: 0 1px 3px rgba(0,0,0,0.3);
        }
        
        .product-discount-badge.ranges {
            background: #8b5cf6;
        }
        
        /* Mensaje de éxito */
        .discount-success-msg {
            color: var(--color-success);
            font-size: 12px;
            text-align: center;
            padding: 8px;
            background: rgba(34, 197, 94, 0.1);
            border-radius: 6px;
            display: none;
        }
        
        .discount-success-msg.show {
            display: block;
        }
        
        /* Responsive */
        @media (max-width: 768px) {
            .discount-editor-btn {
                width: 32px;
                height: 32px;
            }
            
            .discount-editor-btn svg {
                width: 16px;
                height: 16px;
            }
            
            .discount-editor-panel {
                min-width: 260px;
                max-width: 300px;
                padding: 12px;
            }
        }
        
        /* Responsive para overlays */
        @media (max-width: 768px) {
            .overlay-controls-row {
                top: 12px;
                right: 12px;
                left: auto;
                gap: 4px;
                pointer-events: none;
            }
            
            .overlay-editor-btn {
                width: 32px;
                height: 32px;
            }
            
            .overlay-editor-btn svg {
                width: 16px;
                height: 16px;
            } 
             
            .overlay-edit-controls {
                top: 142px;
                right: 8.4px;
                left: auto;
                gap: 6px;
                padding: 6px;
            }
             
            .delete-image-btn {
                width: 36px;
                height: 36px;
            }
            
            .overlay-edit-btn {
                width: 28px;
                height: 28px;
                font-size: 14px;
            }
            
            .overlay-editor-panel {
                top: 46px;
                right:46px;
                left: auto;
                min-width: 270px;
                max-width: 270px !important;
                padding: 10px;
            }
            
            .discount-editor-panel {
                top: 80px;
                right: 45px;
                left: auto;
            }
            
            .overlay-editor-panel input[type="text"] {
                padding: 6px 10px;
                font-size: 13px;
            }
            
            .overlay-add-btn {
                padding: 6px 12px;
                font-size: 12px;
            }
        }
        
        /* ===== FIN OVERLAY EDITOR ===== */
        
        /* Mensaje instructivo y hints para gestión - REMOVIDOS */
        .management-instruction,
        .management-hint-overlay,
        .management-hint-circle,
        .management-hint-text,
        .management-hint-dismiss {
            display: none !important;
        }
        
        /* Lista de productos */
        .product-list-container {
            position: relative !important;
            z-index: 5 !important;
            margin-top: 20px;
            background: var(--color-surface-muted);
            border: 1px solid var(--color-border-muted);
            border-radius: 12px;
            padding: 20px;
            /* Animación removida para evitar parpadeo al recargar */
        }

        /* El carrusel conserva su estructura cuando una imagen todavía no tiene productos. */
        .category-carousel .catalog-page.has-empty-product-list {
            display: flex;
            flex-direction: column;
        }

        .category-carousel .product-list-container.is-empty {
            display: flex;
            flex: 1 1 auto;
            min-height: 170px;
            flex-direction: column;
        }

        .category-carousel .product-list-container.is-empty .product-list {
            display: flex;
            flex: 1 1 auto;
        }
        
        /* Animación solo para primera aparición */
        .product-list-container.first-show {
            animation: slideDown 0.3s ease;
        }
        
        @keyframes slideDown {
            from {
                opacity: 0;
                transform: translateY(-10px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
        
        .product-list-title {
            margin: 0 0 16px 0;
            font-size: 1rem;
            font-weight: 600;
            color: var(--color-text-secondary);
            border-bottom: 1px solid var(--color-border-muted);
            padding-bottom: 8px;
        }
        
        .product-list {
            display: flex;
            flex-direction: column;
            gap: 12px;
            transition: opacity 0.15s ease, min-height 0.2s ease;
        }
        
        /* ===== TARJETA DE PRODUCTO - DISEÑO COMPACTO 2 FILAS ===== */
        .product-list-container .product-item {
            display: flex !important;
            flex-direction: column !important;
            gap: 8px !important;
            background: var(--color-white) !important;
            border: 1px solid var(--color-border-muted) !important;
            border-radius: 10px !important;
            padding: 12px !important;
            transition: all 0.2s ease !important;
        }
        
        .product-list-container .product-item:hover {
            border-color: #d1d5db !important;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05) !important;
        }
        
        /* ===== FILA 1: Nombre (izq) + Precio (der) ===== */
        .product-list-container .product-item-row-1 {
            display: flex !important;
            align-items: center !important;
            justify-content: space-between !important;
            gap: 12px !important;
            width: 100% !important;
        }
        
        .product-list-container .product-item-name {
            font-weight: 600 !important;
            color: #1f2937 !important;
            font-size: 0.938rem !important;
            line-height: 1.3 !important;
            flex: 1 !important;
            min-width: 0 !important;
            white-space: nowrap !important;
            overflow: hidden !important;
            text-overflow: ellipsis !important;
        }
        
        .product-list-container .product-item-price {
            font-weight: 700 !important;
            font-size: 0.938rem !important;
            color: #059669 !important;
            white-space: nowrap !important;
            flex-shrink: 0 !important;
        }
        
        /* ===== FILA 2: Código (izq) + Botones (der) ===== */
        .product-list-container .product-item-row-2 {
            display: flex !important;
            align-items: center !important;
            justify-content: space-between !important;
            gap: 8px !important;
            width: 100% !important;
        }
        
        .product-list-container .product-item-code {
            display: flex !important;
            align-items: center !important;
            gap: 5px !important;
            font-size: 0.813rem !important;
            color: var(--color-text-muted) !important;
            flex: 1 !important;
            min-width: 0 !important;
        }
        
        .product-list-container .product-item-code .code-icon,
        .product-list-container .product-item-code svg.code-icon {
            width: 12px !important;
            height: 12px !important;
            flex-shrink: 0 !important;
        }
        
        .product-list-container .product-item-code .code-icon,
        .product-list-container .product-item-code .code-icon *,
        .product-list-container .product-item-code .code-icon path,
        .product-list-container .product-item-code svg,
        .product-list-container .product-item-code svg *,
        .product-list-container .product-item-code svg path {
            fill: #9ca3af !important;
            color: #9ca3af !important;
        }
        
        .product-list-container .product-item-code .code-text {
            color: var(--color-text-muted) !important;
            white-space: nowrap !important;
            overflow: hidden !important;
            text-overflow: ellipsis !important;
        }
        
        .product-list-container .product-item-actions {
            display: flex !important;
            gap: 6px !important;
            flex-shrink: 0 !important;
        }
        
        /* Fix para Chrome/Edge - forzar color negro en iconos de acciones */
        .product-list-container .product-item-actions button {
            color: var(--color-text-secondary) !important;
        }
        
        .product-list-container .product-item-actions button svg {
            fill: var(--color-text-secondary) !important;
        }
        
        .product-list-container .product-item-actions button:hover svg {
            fill: var(--color-text-strong) !important;
        }
        
        /* Responsive móvil */
        @media (max-width: 360px) {
            .product-list-container .product-item {
                padding: 10px !important;
            }
            
            .product-list-container .product-item-name {
                font-size: 0.875rem !important;
            }
            
            .product-list-container .product-item-price {
                font-size: 0.875rem !important;
            }
            
            .product-list-container .product-item-code {
                font-size: 0.75rem !important;
            }
        }
        .btn-edit-product,
        .btn-delete-product {
            background: none;
            border: 1px solid #d1d5db;
            border-radius: 6px;
            padding: 6px;
            cursor: pointer;
            transition: all 0.2s ease;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .btn-edit-product {
            color: var(--color-text-muted);
        }
        
        .btn-edit-product:hover {
            background: var(--color-border-soft);
            border-color: #9ca3af;
            color: var(--color-text-secondary);
        }
        
        .btn-delete-product {
            color: var(--color-danger-strong);
        }
        
        .btn-delete-product:hover {
            background: var(--color-danger-soft);
            border-color: #f87171;
            color: #b91c1c;
        }
        
        .empty-product-list {
            display: flex;
            flex: 1 1 auto;
            min-height: 112px;
            box-sizing: border-box;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            text-align: center;
            padding: 24px 20px;
            color: var(--color-text-muted);
            background: color-mix(in srgb, var(--color-surface-muted) 82%, transparent);
            border: 1px dashed var(--color-border-muted);
            border-radius: 10px;
        }

        .empty-product-list-title {
            color: var(--color-text-secondary);
            font-weight: 600;
        }
        
        .empty-product-list p {
            margin: 0 0 8px 0;
        }
        
        .empty-hint {
            font-size: 0.875rem;
            color: #9ca3af !important;
            font-style: italic;
        }
        
        /* ===== SISTEMA DE NOTIFICACIONES MODERNAS ===== */
        .notification-container {
            position: fixed;
            top: max(20px, env(safe-area-inset-top));
            right: max(20px, env(safe-area-inset-right));
            z-index: 2147483000;
            pointer-events: none;
            display: flex;
            flex-direction: column;
            align-items: flex-end;
            gap: 10px;
        }

        .notification {
            background: var(--color-white);
            border-radius: 12px;
            padding: 14px 16px 13px;
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
            border-left: 4px solid var(--color-success-strong);
            min-width: 300px;
            max-width: 400px;
            pointer-events: auto;
            transform: translateX(calc(100% + 24px));
            opacity: 0;
            transition: transform 0.24s ease, opacity 0.2s ease, box-shadow 0.18s ease;
            position: relative;
            overflow: hidden;
        }

        .notification.show {
            transform: translateX(0);
            opacity: 1;
        }

        .notification.success {
            border-left-color: var(--color-success-strong);
        }

        .notification.error {
            border-left-color: var(--color-danger);
        }

        .notification.warning {
            border-left-color: var(--color-warning);
        }

        .notification.info {
            border-left-color: var(--color-info);
        }

        .notification-content {
            display: flex;
            align-items: flex-start;
            padding-right: 52px;
        }

        .notification-text {
            flex: 1;
        }

        .notification-title {
            font-weight: 700;
            color: var(--color-text-strong);
            font-size: 14px;
            margin-bottom: 4px;
        }

        .notification-message {
            color: var(--color-text-muted);
            font-size: 13px;
            line-height: 1.4;
            white-space: pre-line;
        }

        .notification-close {
            position: absolute;
            top: 10px;
            right: 12px;
            background: none;
            border: none;
            color: var(--color-text-muted);
            cursor: pointer;
            font-size: 11px;
            font-weight: 600;
            line-height: 1.2;
            padding: 3px 4px;
            border-radius: 5px;
            transition: color 0.15s ease, background-color 0.15s ease;
        }

        .notification-close:hover {
            color: var(--color-text-muted);
            background: var(--color-border-soft);
        }

        .notification-progress {
            position: absolute;
            bottom: 0;
            left: 0;
            height: 3px;
            background: rgba(16, 185, 129, 0.3);
            border-radius: 0 0 12px 12px;
            transform-origin: left;
            width: 100%;
            animation: notificationProgress var(--notification-duration, 4000ms) linear forwards;
        }

        .notification-repeated {
            box-shadow: 0 8px 36px rgba(0, 0, 0, 0.2);
        }

        .notification.success .notification-progress {
            background: rgba(16, 185, 129, 0.3);
        }

        .notification.error .notification-progress {
            background: rgba(239, 68, 68, 0.3);
        }

        .notification.warning .notification-progress {
            background: rgba(245, 158, 11, 0.3);
        }

        .notification.info .notification-progress {
            background: rgba(59, 130, 246, 0.3);
        }

        @keyframes notificationProgress {
            from { transform: scaleX(1); }
            to { transform: scaleX(0); }
        }

        /* ===== MODAL DE CONFIRMACIÓN MODERNO ===== */ 
        .modern-confirm-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.6);
            backdrop-filter: blur(4px);
            z-index: 2147482900;
            display: flex;
            align-items: center;
            justify-content: center;
            opacity: 0;
            visibility: hidden;
            transition: all 0.3s ease;
        }

        .modern-confirm-overlay.show {
            opacity: 1;
            visibility: visible;
        }

        .modern-confirm-modal {
            background: var(--color-white);
            border-radius: 12px;
            padding: 0;
            max-width: 400px;
            width: 90%;
            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
            transform: scale(0.9) translateY(20px);
            transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
            overflow: hidden;
        }

        .modern-confirm-overlay.show .modern-confirm-modal {
            transform: scale(1) translateY(0);
        }

        .modern-confirm-icon {
            display: none;
        }

        .modern-confirm-title {
            padding: 20px 24px 16px 24px;
            border-bottom: 1px solid var(--color-border-soft);
            font-size: 18px;
            font-weight: 600;
            color: var(--color-text-strong);
            margin: 0;
        }

        .modern-confirm-message {
            padding: 16px 24px;
            color: var(--color-text-muted);
            font-size: 14px;
            line-height: 1.5;
            margin: 0;
        }

        .modern-confirm-buttons {
            padding: 0 24px 20px 24px;
            display: flex;
            flex-direction: column;
            gap: 10px;
        }

        .modern-confirm-row-pair {
            display: flex;
            flex-direction: row;
            gap: 10px;
            width: 100%;
            align-items: stretch;
        }
 
        .modern-confirm-btn-pair {
            flex: 1 1 0;
            min-width: 0;
            width: auto !important;
            flex-direction: initial;
            align-items: center;
            justify-content: center;
            text-align: center;
            gap: 8px;
            padding: 12px 8px;
            font-size: 12px;
            line-height: 1.25;
        }

        .modern-confirm-btn-pair-text {
            display: block;
        }

        .modern-confirm-btn-preview {
            justify-content: center;
            text-align: center;
            padding-top: 14px;
            margin-top: 4px;
            border-top: 1px solid var(--color-border-soft);
        }
 
        .modern-confirm-btn {
            display: flex; 
            align-items: center;
            gap: 12px;
            width: 100%;
            padding: 12px 16px;
            border-radius: 8px;
            font-size: 14px;
            font-weight: 500;
            cursor: pointer;
            border: 1px solid var(--color-border-muted);
            background: var(--color-surface-muted);
            color: var(--color-text-secondary);
            transition: all 0.15s ease;
            text-align: left;
        }

        .modern-confirm-buttons > .modern-confirm-btn {
            justify-content: center;
            text-align: center;
        }

        .modern-confirm-btn.confirm {
            background: var(--color-text-strong);
            border-color: var(--color-text-strong);
            color: var(--color-white);
        }

        .modern-confirm-btn.confirm:hover {
            filter: brightness(0.92);
        }

        .modern-confirm-modal--danger .modern-confirm-btn.confirm {
            background: var(--color-danger);
            border-color: var(--color-danger);
        }

        .modern-confirm-btn:not(.confirm):hover {
            background: var(--color-border-soft);
        }
        
        .modern-confirm-btn svg {
            flex-shrink: 0;
        }

        .modern-confirm-btn.btn-delete {
            background: var(--color-danger-soft);
            color: var(--color-danger-strong);
            border: 1px solid #fecaca;
        }

        .modern-confirm-btn.btn-delete:hover {
            background: #fee2e2;
        }

        .modern-confirm-btn.btn-warning {
            color: #313131;
        }

     

        .modern-confirm-btn.btn-success {
            background: #ecfdf5;
            color: #047857;
            border: 1px solid #a7f3d0;
        }

        .modern-confirm-btn.btn-success:hover {
            background: #d1fae5;
        }
        
        .modern-confirm-footer {
            padding: 16px 24px 20px 24px;
            display: flex;
            justify-content: flex-end;
        }
        
        .modern-confirm-cancel {
            padding: 8px 16px;
            border-radius: 6px;
            font-size: 14px;
            font-weight: 500;
            cursor: pointer;
            background: var(--color-surface-muted);
            color: var(--color-text-secondary);
            border: 1px solid #d1d5db;
            transition: all 0.2s ease;
        }
        
        .modern-confirm-cancel:hover {
            background: var(--color-border-soft);
        }
        
        .modern-confirm-delete {
            padding: 8px 16px;
            border-radius: 6px;
            font-size: 14px;
            font-weight: 500;
            cursor: pointer;
            background: var(--color-danger);
            color: var(--color-white);
            border: none;
            transition: all 0.2s ease;
        }
        
        .modern-confirm-delete:hover {
            background: var(--color-danger-strong);
        }

        /* Responsive para notificaciones */
        @media (max-width: 480px) {
            .notification-container {
                top: max(12px, env(safe-area-inset-top));
                left: max(12px, env(safe-area-inset-left));
                right: max(12px, env(safe-area-inset-right));
                align-items: stretch;
            }

            .notification {
                min-width: auto;
                max-width: none;
            }

            .modern-confirm-modal {
                margin: 20px;
                width: auto;
            }
        }

        @media (prefers-reduced-motion: reduce) {
            .notification,
            .modern-confirm-overlay,
            .modern-confirm-modal {
                transition-duration: 0.01ms !important;
            }

            .notification-progress {
                animation: none !important;
            }
        }
        
        @media (max-width: 768px) {
            .modern-confirm-title {
                padding: 16px 20px 12px 20px;
                font-size: 16px;
            }
            
            .modern-confirm-message {
                padding: 12px 20px;
            }
            
            .modern-confirm-buttons {
                padding: 0 20px 16px 20px;
            }
        }
        
        /* PUNTOS DE RETIRO - CONFIGURACIÓN */
        .config-section {
            margin-top: 24px;
            padding-top: 20px;
            border-top: 1px solid var(--color-border-muted);
        }
        
        .config-section h4 {
            margin: 0 0 8px 0;
            font-size: 1.1rem;
            font-weight: 600;
            color: var(--color-text-secondary);
        }
        
        .section-subtitle {
            margin: 0 0 16px 0;
            font-size: 0.875rem;
            color: var(--color-text-muted);
        }
        
        .pickup-points-container {
            margin-bottom: 16px;
        }
        
        .pickup-point-item {
            background: var(--color-surface-muted);
            border: 1px solid var(--color-border-muted);
            border-radius: 8px;
            padding: 16px;
            margin-bottom: 12px;
            position: relative;
        }
        
        .pickup-point-item.inactive {
            background: var(--color-border-soft);
            opacity: 0.7;
        }
        
        .pickup-point-header {
            display: flex;
            justify-content: between;
            align-items: flex-start;
            margin-bottom: 8px;
        }
        
        .pickup-point-info {
            flex: 1;
        }
        
        .pickup-point-name {
            font-weight: 600;
            color: var(--color-text-secondary);
            margin: 0 0 4px 0;
            font-size: 0.95rem;
        }
        
        .pickup-point-address {
            color: var(--color-text-muted);
            margin: 0 0 4px 0;
            font-size: 0.875rem;
        }
        
        .pickup-point-description {
            color: #9ca3af;
            margin: 0;
            font-size: 0.8rem;
            font-style: italic;
        }
        
        .pickup-point-status {
            display: flex;
            align-items: center;
            gap: 4px;
            font-size: 0.75rem;
            font-weight: 500;
            margin-left: 12px;
        }
        
        .pickup-point-status.active {
            color: #059669;
        }
        
        .pickup-point-status.inactive {
            color: var(--color-danger-strong);
        }
        
        .pickup-point-actions {
            display: flex;
            gap: 8px;
            margin-top: 12px;
        }
        
        .pickup-point-btn {
            padding: 4px 8px;
            border: none;
            border-radius: 4px;
            font-size: 0.75rem;
            cursor: pointer;
            transition: all 0.2s ease;
        }
        
        .pickup-point-btn.edit {
            background: var(--color-info);
            color: var(--color-white);
        }
        
        .pickup-point-btn.edit:hover {
            background: #2563eb;
        }
        
        .pickup-point-btn.toggle {
            background: var(--color-text-muted);
            color: var(--color-white);
        }
        
        .pickup-point-btn.toggle:hover {
            background: #4b5563;
        }
        
        .pickup-point-btn.toggle.activate {
            background: #059669;
        }
        
        .pickup-point-btn.toggle.activate:hover {
            background: #047857;
        }
        
        .pickup-point-btn.delete {
            background: var(--color-danger);
            color: var(--color-white);
        }
        
        .pickup-point-btn.delete:hover {
            background: var(--color-danger-strong);
        }
        
        .pickup-points-actions {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            gap: 8px;
        }
        
        .btn-add-pickup-point {
            background: var(--color-success-strong);
            color: var(--color-white);
            border: none;
            padding: 10px 16px;
            border-radius: 6px;
            font-size: 0.875rem;
            cursor: pointer;
            transition: all 0.2s ease;
            display: flex;
            align-items: center;
            gap: 6px;
        }
        
        .btn-add-pickup-point:hover {
            background: #059669;
        }
        
        .btn-add-pickup-point:disabled {
            background: #9ca3af;
            cursor: not-allowed;
        }
        
        .pickup-limit-text {
            color: var(--color-text-muted);
            font-size: 0.75rem;
        }
        


        /* Carrusel continuo - Solo el contenedor de imágenes */
        .category-carousel {
            position: relative;
            width: 100%;
            height: auto;
            overflow: hidden;
            /* border-radius: 12px; - REMOVIDO: sin bordes redondeados */
            /* Asegurar que el overflow está contenido */
            contain: layout style paint;
            /* Limitar ancho máximo del carrusel */
            max-width: 700px;
            margin: 0 auto;
        }
        
        /* Contenedor de imagen con posición relativa para botones */
        .image-container {
            position: relative;
            width: 100%;
            height: auto;
            overflow: hidden; /* Importante: contener cualquier desbordamiento */
            /* Limitar ancho para contener la animación */
            max-width: 100%;
            margin: 0 auto;
            /* Sin bordes redondeados */
            border-radius: 0 !important;
        }

        .carousel-track {
            display: flex;
            width: 100%;
            transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1),
                        height 0.24s ease;
            will-change: transform;
            /* Asegurar que el track no cause overflow */
            backface-visibility: hidden;
            transform-style: flat;
        }

        .catalog-page {
            flex: 0 0 100%;
            width: 100%;
            position: relative;
            /* Contener la página dentro de sus límites */
            overflow: hidden;
            min-height: 0; /* Prevenir expansion vertical */
        }

        .catalog-page.hidden {
            /* No usar hidden en carrusel continuo */
        }

        .page-title {
            text-align: center;
            font-size: 1.25rem;
            font-weight: 600;
            color: var(--primary-color);
            margin-bottom: 1rem;
        }

        .image-container {
            position: relative;
            background: var(--surface);
            /* border-radius: var(--border-radius); - REMOVIDO: sin bordes redondeados */
            overflow: hidden;
            box-shadow: var(--shadow);
            margin: 0 auto;
            max-width: 700px; /* Reducir para mejor contención */
            container-type: inline-size; /* Para overlays con tamaño relativo (cqw) */
        }

        .catalog-image {
            width: 100% !important;
            aspect-ratio: 4/6.7 !important; /* Siempre relación 4:5 */
            display: block !important;
            object-fit: cover !important; /* Imagen completa, centrada */
            object-position: center; /* Centrado por defecto - sin !important para permitir override inline */  
            background: var(--color-surface-slate) !important; /* Fondo sutil para imágenes pequeñas */
            /* border-radius: 12px; - REMOVIDO: sin bordes redondeados */
            transition: box-shadow 0.3s ease, opacity 0.3s ease !important;
            -webkit-touch-callout: none;
            -webkit-user-select: none;
            user-select: none;
        }

        /* ===== SKELETON LOADING ===== */
        /* Wrapper para skeleton + imagen */
        .skeleton-wrapper {
            position: relative !important;
            width: 100% !important;
            overflow: hidden !important;
            background: var(--catalog-image-background, var(--color-surface-slate, #f1f5f9)) !important;
            contain: paint;
            isolation: isolate;
        }

        /* Skeleton carrusel */
        .image-container .skeleton-wrapper {
            aspect-ratio: 4/6.7 !important;
        }

        /* Skeleton grilla */
        .grid-item .skeleton-wrapper {
            aspect-ratio: 4/6.6 !important;
            border-radius: 0px !important;
        }

        /* Skeleton base */
        .image-skeleton {
            position: absolute !important;
            top: 0 !important;
            left: 0 !important;
            width: 100% !important;
            height: 100% !important;
            background: var(--color-border-muted) !important;
            z-index: 0 !important;
            overflow: hidden !important;
        }

        /* Animación shimmer */
        .image-skeleton::after {
            content: '' !important;
            position: absolute !important;
            top: 0 !important;
            left: -100% !important;
            width: 100% !important;
            height: 100% !important;
            background: linear-gradient(
                90deg,
                transparent,
                rgba(194, 60, 60, 0.47),
                transparent
            ) !important;
            animation: shimmer 1.5s infinite !important;
        }

        @keyframes shimmer {
            0% { left: -100%; }
            100% { left: 100%; }
        }

        /* Imagen dentro del wrapper */
        .skeleton-wrapper .catalog-image,
        .skeleton-wrapper .grid-image {
            position: absolute !important;
            top: 0 !important;
            left: 0 !important;
            width: 100% !important;
            height: 100% !important;
            object-fit: cover !important;
            opacity: 0 !important;
            transition: opacity 0.3s ease !important;
            z-index: 1 !important;
            -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
        }

        /* Imagen visible cuando cargó */
        .skeleton-wrapper .catalog-image.loaded,
        .skeleton-wrapper .grid-image.loaded {
            opacity: 1 !important;
            -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
        }

        /* Ocultar skeleton cuando imagen cargó */
        .image-skeleton.hidden {
            opacity: 0 !important;
            transition: opacity 0.3s ease !important;
        }

        /* ===== CARRUSEL DE IMÁGENES (MODO CLIENTE) ===== */
        
        
        
        
        
        
        
         
        
        
        
        
        
        
        
        
        /* Botones de navegación del carrusel (PC) */
        
        
        
        
        
        
        
        /* Mostrar botones en PC cuando hay hover en el carrusel */
        @media (min-width: 769px) {
            /*
             * Ajuste vertical para escritorio:
             * - conserva el marco 4 / 6.7 usado para guardar X/Y;
             * - limita el ancho según la altura útil del viewport;
             * - no usa transform, por lo que productos y overlays continúan
             *   calculándose sobre el tamaño real del mismo contenedor.
             *
             * 59.7015vh equivale a 100vh * (4 / 6.7). Los 110px en el eje
             * horizontal reservan aproximadamente 184px verticales para
             * encabezado, indicadores y navegación inferior.
             */
            .category-carousel,
            .category-intro,
            body.is-catalog-owner .category-intro {
                max-width: min(700px, calc(59.7015vh - 110px));
            }

            @supports (height: 100dvh) {
                .category-carousel,
                .category-intro,
                body.is-catalog-owner .category-intro {
                    max-width: min(700px, calc(59.7015dvh - 110px));
                }
            }
        }
        
        /* Barra de progreso del autoplay */
        
        
         
          
        
        
        
        


        /* CARRITO CENTRADO EN PANTALLA */
        .cart-container {
            position: fixed !important;
            bottom: 70px !important; /* Arriba del menú inferior */
            left: 50% !important;
            transform: translateX(-50%) !important;
            width: 90% !important;
            max-width: 800px !important;
            background: var(--surface) !important;
            box-shadow: 0 -4px 6px -1px rgba(0, 0, 0, 0.1) !important;
            border-top: 1px solid #e2e8f0 !important;
            border-radius: 12px !important; /* Redondeado completo */
            z-index: 50 !important; /* Menor que el menú inferior */
            transition: transform 0.3s ease !important;
        }

        .cart-container.hidden {
            transform: translateX(-50%) translateY(calc(100% + 70px)) !important;
        }

        .cart-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 1rem;
            border-bottom: 1px solid #e2e8f0;
        }

        .cart-header h3 {
            font-size: 1.1rem;
            font-weight: 600;
            color: var(--primary-color);
        }

        .cart-title-section {
            display: flex !important;
            align-items: center !important;
        }

        .cart-header-actions {
            display: flex !important;
            align-items: center !important;
            gap: 4rem !important;
        }

        .clear-cart-btn {
            background: none !important;
  border-color: #88888826;
  font-size: 12px !important;
  color: #9ca3af !important;
  cursor: pointer !important;
  text-decoration: none !important;
  padding: 4px 8px !important;
  border-radius: 6px !important;
  transition: all 0.2s ease !important;
  font-weight: 400 !important;
  letter-spacing: 0.2em !important;
        }

        .clear-cart-btn:hover {
            color:rgb(116, 172, 255) !important;
            background: rgba(239, 68, 68, 0.05) !important;
        }

        .clear-cart-btn:active {
            transform: scale(0.98) !important;
        }

        .clear-cart-btn.hidden {
            display: none !important;
        }

        .cart-toggle {
            background: none;
            border: none;
            font-size: 1.2rem;
            cursor: pointer;
            color: var(--text-secondary);
            transition: transform 0.2s ease;
        }

        .cart-items {
            max-height: 200px;
            overflow-y: auto;
            padding: 0 1rem;
        }

        .cart-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0.75rem 0;
            border-bottom: 1px solid var(--color-surface-slate-2);
            animation: slideIn 0.3s ease;
        }

        .cart-item:last-child {
            border-bottom: none;
        }

        .item-info {
            flex: 1;
        }

        .item-name {
            font-weight: 500;
            color: var(--text-primary);
            font-size: 0.9rem;
        }

        .item-price {
            font-size: 0.8rem;
            color: var(--text-secondary);
        }

        .item-quantity {
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }

        .quantity-btn {
            width: 28px;
            height: 28px;
            border: 1px solid #e2e8f0;
            background: var(--surface);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            font-weight: 600;
            transition: all 0.2s ease;
            color: var(--text-primary);
        }

        .quantity-btn:hover {
            border-color: var(--primary-color);
            color: var(--primary-color);
            transform: scale(1.1);
        }

        .cart-total {
            padding: 1rem !important;
            border-top: 1px solid #e2e8f0 !important;
            justify-content: space-between !important;
            align-items: center !important;
            font-weight: 600 !important;
            color: var(--primary-color) !important;
            background: var(--color-surface-slate) !important;
            display: none !important;
        }

        .cart-total.show {
            display: flex !important;
        }

        .total-amount {
            font-size: 1.1rem !important;
            color: #059669 !important;
        }

        .cart-footer {
            padding: 1rem;
        }

        .whatsapp-btn {
            width: 100%;
            background: var(--success-color);
            color: var(--color-white);
            border: none;
            padding: 1rem;
            border-radius: 8px;
            font-weight: 600;
            font-size: 1rem;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 0.5rem;
            transition: all 0.2s ease;
            position: relative;
        }

        .whatsapp-btn:hover {
            background: #20ba5a;
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(37, 211, 102, 0.3);
        }
        
        .whatsapp-btn.insufficient-products {
            background: var(--color-warning);
            cursor: not-allowed;
        }
        
        .whatsapp-btn.insufficient-products:hover {
            background: #d97706;
            transform: none;
            box-shadow: 0 4px 15px rgba(245, 158, 11, 0.3);
        }
        
        /* ===== CATEGORÍAS CON TRANSICIÓN SUTIL ===== */
        .navigation-wrapper {
            /* Posicionamiento fijo arriba del menú inferior - FORZADO PARA AMBAS VISTAS */
            position: fixed !important;
            bottom: 70px !important; /* Más espacio para asegurar que esté arriba */
            left: 0 !important;
            right: 0 !important;
            width: 100vw !important;
            z-index: 0 !important;
            padding: 0 !important;
            box-sizing: border-box !important;
            margin: 0 !important;
            
            /* Transición y estado inicial */
            max-height: 0 !important;
            overflow: hidden !important;
            opacity: 0 !important;
            transform: translateY(-5px) !important;
            transition: all 0.25s ease !important;
            background: rgba(255, 255, 255, 0.95) !important;
            backdrop-filter: blur(10px) !important;
            border-top: 1px solid rgba(0, 0, 0, 0.1) !important;
        }
        
        .navigation-wrapper.show {
            max-height: 200px !important; /* Suficiente para las categorías */
            opacity: 1 !important;
            transform: translateY(0) !important;
            /* Asegurar posicionamiento fijo también cuando está visible */
            position: fixed !important;
            bottom: 70px !important;
            z-index: 2 !important;
        }
        
        /* Quitar espacios extra */
        .navigation-wrapper .page-navigation {
            margin: 0 auto !important; /* Centrado dentro del wrapper */
            padding: 12px 1rem !important; /* Padding vertical y lateral como catalog-main */
            max-width: 800px !important; /* Mismo límite que las imágenes */
        }
        
        /* Asegurar centrado cuando está visible */
        .navigation-wrapper.show .page-navigation {
            margin: 0 auto !important;
            max-width: 800px !important;
        }
        
        /* ===== BOTÓN CATEGORÍAS DESTACADO ===== */
        #menu-categories,
        #menu-categories-client {
            width: 48px !important;
            height: 48px !important;
            border-radius: 50% !important;
            background:rgb(201, 201, 201) !important;
            transform: translateY(-8px);
            transition: all 0.2s ease;
            user-select: none !important;
            -webkit-user-select: none !important;
            -moz-user-select: none !important;
            -ms-user-select: none !important;
          border: 25px black;
        }
        
        #menu-categories ,
        #menu-categories-client , SVG {
           
        }
        
        #menu-categories,
        #menu-categories-client {
            
            color: rgba(15, 15, 15, 0.8) !important;
        }

        #menu-categories:hover,
        #menu-categories-client:hover {
            background: rgb(201, 201, 201) !important;
        }
        
        /* Estado activo - solo cambio de color */
        #menu-categories.categories-active,
        #menu-categories-client.categories-active {
            background: #4CAF50  !important;
        }

        .whatsapp-btn:active {
            transform: translateY(0);
        }

        .cart-count {
            position: absolute;
            top: -8px;
            right: -8px;
            background: var(--primary-color);
            color: var(--color-white);
            border-radius: 50%;
            width: 24px;
            height: 24px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 0.75rem;
            font-weight: 600;
        }

        .empty-cart {
            padding: 2rem 1rem;
            text-align: center;
            color: var(--text-secondary);
        }

        .empty-cart-icon {
            font-size: 2rem;
            margin-bottom: 0.5rem;
        }

        /* VISTA GRILLA */
        .grid-view {
            padding: 0 1rem 120px 1rem;
            max-width: 800px;
            margin: 0 auto;
        }

        .grid-view.hidden {
            display: none !important;
        }

        .grid-container {
            display: flex !important;
            flex-direction: column !important;
            gap: 18px !important;
            margin-top: 1rem !important;
            -webkit-user-select: none;
            user-select: none;
        }

        .grid-category-section {
            background: rgba(148, 163, 184, 0.06) !important;
            border: 1px dashed rgba(148, 163, 184, 0.28) !important;
            padding: 7px 5px;
            border-radius: 8px;
        }

        .grid-category-header {
            display: flex !important;
            align-items: center !important;
            justify-content: space-between !important;
            gap: 12px !important;
            flex-wrap: nowrap !important;
            width: 100% !important;
        }

        .grid-category-heading {
            min-width: 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex: 1 1 !important;
  margin-left: -5.6px;
        }

        .grid-category-title-wrap {
            position: relative !important;
            display: inline-flex !important;
            flex: 0 1 auto !important;
            min-width: 0 !important;
            align-items: center !important;
            max-width: 100% !important;
        }

        .grid-category-title-wrap .grid-category-title {
            flex: 1 1 auto !important;
        }

        .grid-category-title {
            margin: 0 !important;
  
            font-size: 0.8rem !important;
  line-height: 1.2 !important;
  color: #fff !important;
  flex: 0 1 auto !important;
  min-width: 0 !important;
  background: var(--accent-color, #10b981) !important;
  border-radius: 0px 20px 20px 0px;
  padding: 4px 40px;
  font-weight: 600 !important;
        }

        .grid-category-name {
            display: block !important;
            white-space: nowrap !important;
            overflow: hidden !important;
            text-overflow: ellipsis !important;
        }

        .grid-category-meta {
            display: inline-block !important;
  margin-top: 0 !important;
  font-size: 0.76rem !important;
  color: var(--color-text-muted, #6b7280) !important;
  white-space: nowrap !important;
  background: white;
  padding: 0px 15px 1px 23px;
  border-radius: 53px;
  margin-left: -20px;
  z-index: -1;
        }

        .grid-category-actions {
            display: flex !important;
            align-items: center !important;
            justify-content: flex-end !important;
            gap: 10px !important;
            flex-wrap: nowrap !important;
            flex: 0 0 auto !important;
            margin-left: auto !important;
        }

        .delete-category-btn--grid {
            position: absolute !important;
            left: 10px !important;
            top: 50% !important;
            transform: translate(-45%, -50%) !important;
            z-index: 3 !important;
            width: 28px !important;
            height: 28px !important;
            flex-shrink: 0 !important;
            border-radius: 20.0% !important;              
            background: white !important;
            color: var(--color-danger, #ef4444) !important;
            border: none !important;
            font-size: 16px !important;
            font-weight: bold !important;
            line-height: 1 !important;
            cursor: pointer !important;
            display: flex !important;
            align-items: center !important;
            justify-content: center !important;
            transition: background 0.2s ease, transform 0.2s ease !important;
            opacity: 1 !important;
            margin: 0 !important;
            padding: 0 !important;
        }

        .delete-category-btn--grid:hover {
            background:  #ececec !important;
        }

        .delete-category-btn--grid:active {
            transform: translate(-45%, -50%) scale(0.95) !important;
        }

        .delete-category-btn--grid .delete-category-grid-x {
            display: block !important;
            line-height: 1 !important;
            transform: translateY(-1.1px) translateX(0.3px) !important;

        }

        .grid-category-controls {
            display: flex !important;
            align-items: center !important;
            flex: 0 0 auto !important;
        }

        .grid-display-mode-wrapper {
            display: flex !important;
            flex-direction: column !important;
            align-items: flex-start !important;
        }

        .grid-display-mode-label {
            font-size: 7.4px !important;
  line-height: 1 !important;
  color: #adadad !important;
  margin: -2px 0 1px 13.9px !important;
  letter-spacing: 0.35em !important;
}

        .grid-display-toggle {
            display: inline-flex !important;
            align-items: center !important;
            gap: 4px !important;
            padding: 2px 4px !important;
            border-radius: 999px !important;
            background: rgba(148, 163, 184, 0.12) !important;
        }

        .grid-display-pill {
            border: none !important;
            background: transparent !important;
            color: var(--color-text-muted, #6b7280) !important;
            border-radius: 999px !important;
            padding: 7px 12px !important;
            font-size: 0.5rem !important;
            font-weight: 600 !important;
            cursor: pointer !important;
            transition: all 0.2s ease !important;
        }

        .grid-display-pill.is-active {
            background: var(--surface, #ffffff) !important;
            color: var(--color-text-primary, #111827) !important;
            box-shadow: 0 1px 2px rgba(15, 23, 42, 0.12) !important;
        }

        .grid-category-section.is-saving .grid-display-pill,
        .grid-category-section.is-saving .grid-category-add-btn,
        .grid-category-section.is-saving .delete-category-btn--grid {
            opacity: 0.65 !important;
            pointer-events: none !important;
        }

        .grid-category-add-btn {
            min-width: 106px !important;
            border: none !important;
            background: var(--accent-color, #10b981) !important;
            color: white !important;
            border-radius: 999px !important;
            padding: 3px 10.8px !important;
            font-size: 0.6rem !important;
            font-weight: 600 !important;
            cursor: pointer !important;
            transition: all 0.2s ease !important;
            white-space: nowrap !important;
            width: auto !important;
            min-width: 0 !important;
            aspect-ratio: auto !important;
            display: inline-flex !important;
            align-items: center !important;
            justify-content: center !important;
            margin: 0 !important;
            min-height: 28px !important;
            height: auto !important;
        }

       

        .grid-category-body {
            position: relative !important;
            width: 100% !important;
            margin-top: 0 !important;
        }

        .grid-category-media {
            position: relative !important;
            width: 100% !important;
        }

        .grid-carousel-arrow {
            position: absolute !important;
            top: 50% !important;
            transform: translateY(-50%) !important;
            width: 32px !important;
            height: 32px !important;
            border: 1px solid rgba(15, 23, 42, 0.08) !important;
            border-radius: 999px !important;
            background: rgba(255, 255, 255, 0.96) !important;
            color: var(--color-text-primary, #111827) !important;
            box-shadow: 0 10px 24px rgba(15, 23, 42, 0.14) !important;
            display: flex !important;
            align-items: center !important;
            justify-content: center !important;
            cursor: pointer !important;
            z-index: 6 !important;
            opacity: 0 !important;
            pointer-events: none !important;
            transition: opacity 0.2s ease, transform 0.2s ease, background 0.2s ease !important;
        }

        .grid-category-media:hover .grid-carousel-arrow,
        .grid-category-media:focus-within .grid-carousel-arrow {
            opacity: 1 !important;
            pointer-events: auto !important;
        }

        .grid-category-section.has-grid-carousel-nav .grid-carousel-arrow {
            pointer-events: auto !important;
        }

        .grid-carousel-arrow:hover {
            background: #ffffff !important;
            transform: translateY(-50%) scale(1.03) !important;
        }

        body.dark-mode .grid-carousel-arrow,
        body.theme-dark .grid-carousel-arrow {
            border-color: rgba(148, 163, 184, 0.2) !important;
            background: rgba(17, 24, 39, 0.92) !important;
            color: #f9fafb !important;
            box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35) !important;
        }

        body.dark-mode .grid-carousel-arrow:hover,
        body.theme-dark .grid-carousel-arrow:hover {
            background: rgba(31, 41, 55, 0.96) !important;
        }

        .grid-carousel-arrow.is-disabled {
            opacity: 0 !important;
            pointer-events: none !important;
        }

        .grid-category-section.is-all-mode .grid-carousel-arrow {
            opacity: 0 !important;
            pointer-events: none !important;
        }

        .grid-carousel-arrow--prev {
            left: 10px !important;
        }

        .grid-carousel-arrow--next {
            right: 10px !important;
        }

        .grid-category-images {
            --grid-image-columns: 3;
            --grid-image-gap: 15px;
            display: grid !important;
            gap: 15px !important;
            align-items: stretch !important;
            margin-top: 3.6px;

        }

        .grid-category-images--all {
            grid-template-columns: repeat(var(--grid-image-columns), minmax(0, 1fr)) !important;
            grid-auto-flow: row dense !important;
            grid-auto-rows: 1px !important;
            row-gap: 0 !important;
            align-items: start !important;
        }

        .grid-category-images--carousel {
            grid-auto-flow: column !important;
            grid-auto-columns: calc((100% - (var(--grid-image-gap) * (var(--grid-image-columns) - 1))) / var(--grid-image-columns)) !important;
            gap: var(--grid-image-gap) !important;
            align-items: start !important;
            align-content: start !important;
            overflow-x: auto !important;
            overflow-y: hidden !important;
            padding-bottom: 4px !important;
            scroll-snap-type: x proximity !important;
            scrollbar-width: none !important;
        }

        .grid-category-images--carousel::-webkit-scrollbar {
            display: none !important;
        }

        .grid-category-images--all .grid-item,
        .grid-category-images--carousel .grid-item {
            width: 100% !important;
            min-width: 0 !important;
        }

        .grid-category-images--all > .grid-item {
            height: auto !important;
            align-self: start !important;
            margin-bottom: var(--grid-image-gap) !important;
        }

        .grid-category-images--all > .grid-item:nth-child(3n + 1) {
            grid-column: 1 !important;
        }

        .grid-category-images--all > .grid-item:nth-child(3n + 2) {
            grid-column: 2 !important;
        }

        .grid-category-images--all > .grid-item:nth-child(3n) {
            grid-column: 3 !important;
        }

        .grid-category-images--carousel .grid-item {
            height: auto !important;
            align-self: start !important;
            scroll-snap-align: start !important;
        }

        .grid-category-section.has-carousel-fade .grid-category-media::after {
            content: '' !important;
            position: absolute !important;
            top: 0 !important;
            right: 0 !important;
            bottom: 0 !important;
            width: 52px !important;
            pointer-events: none !important;
            background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.92)) !important;
            z-index: 5 !important;
        }

        body.dark-mode .grid-category-section.has-carousel-fade .grid-category-media::after,
        body.theme-dark .grid-category-section.has-carousel-fade .grid-category-media::after {
            background: linear-gradient(90deg, rgba(17, 24, 39, 0), rgba(17, 24, 39, 0.96)) !important;
        }

        .grid-category-empty {
            border: 1px dashed rgba(148, 163, 184, 0.4) !important;
            border-radius: 12px !important;
            padding: 18px 16px !important;
            text-align: center !important;
            color: var(--color-text-muted, #6b7280) !important;
            background: rgba(248, 250, 252, 0.7) !important;
            font-size: 0.9rem !important;
            margin-top: 8px;
        }

        .grid-item {
           
            overflow: hidden !important;
            border-radius: 8px !important;
            transition: all 0.2s ease !important;
            cursor: pointer !important;
            display: flex !important;
            flex-direction: column !important;
            position: relative !important;
            z-index: 1 !important;
            container-type: inline-size !important;
            width: 100% !important;
            height: 100% !important;
        }

        
        .grid-item:active {
            transform: translateY(0) scale(0.98) !important;
            transition: all 0.1s ease !important;
        }

        .grid-item.selected {
            isolation: isolate !important;
            box-shadow: none !important;
        }

        .grid-item.selected::after {
            content: '';
            position: absolute;
            inset: 0;
            z-index: 50;
            box-sizing: border-box;
            border: 2px solid var(--accent-color, #ec4899);
            border-radius: inherit;
            pointer-events: none;
        }

        .grid-image {
            width: 100% !important;
            aspect-ratio: 4/6.6 !important;
            object-fit: cover !important;
            display: block !important;
            border-radius: 0 !important;
            background: var(--color-surface-slate) !important;
            -webkit-touch-callout: none;
            -webkit-user-select: none;
            user-select: none;
        }

        .grid-image-stage {
            position: relative !important;
        }

        .grid-image-stage .product-management-empty-state {
            z-index: 12 !important;
        }

        .grid-image-stage .product-management-wrapper {
            position: absolute !important;
            left: auto !important;
            top: auto !important;
            right: 10px !important;
            bottom: 10px !important;
            z-index: 13 !important;
        }

        .grid-image-stage .add-product-btn {
            min-height: 20.5px !important;
            padding: 6px 9px !important;
            font-size: 0.65rem !important;
        }

        .grid-image-stage .add-product-ia-btn {
            min-height: 18px !important;
            padding: 4px 8px !important;
            font-size: 0.6rem !important;
            white-space: nowrap !important;
        }

        .grid-item.has-grid-product-info .grid-image {
            border-radius: 0 !important;
        }

        .grid-product-info {
            border: 0.5px solid #e5e7eb !important;
            border-radius: 0 0 8px 8px !important;
            box-sizing: border-box !important;
        }

        .grid-product-info--empty {
            display: flex !important;
            flex-direction: column !important;
            min-height: 52px !important;
            box-sizing: border-box !important;
            align-items: center !important;
            justify-content: center !important;
            gap: 2px !important;
            padding: 10px 12px !important;
            background: rgba(248, 250, 252, 0.92) !important;
            border-style: dashed !important;
        }

        .grid-product-info-empty-title {
            color: #475569 !important;
            font-size: 11px !important;
            font-weight: 700 !important;
            line-height: 1.25 !important;
            text-align: center !important;
        }

        .grid-product-info-empty-text {
            color: #64748b !important;
            font-size: 9px !important;
            font-weight: 400 !important;
            line-height: 1.25 !important;
            text-align: center !important;
        }

        .grid-product-info-row {
            display: grid !important;
            grid-template-columns: minmax(0, 1fr) auto !important;
            grid-template-areas:
                "name name"
                "options options"
                "price price" !important;
            align-items: end !important;
            column-gap: 8px !important;
            row-gap: 1px !important;
            padding: 6px 10px 7px !important;
            border-bottom: 0.5px solid #e5e7eb !important;
            min-width: 0 !important;
        }

        .grid-product-info-row:last-child {
            border-bottom: none !important;
        }

        .grid-product-info-main {
            display: contents !important;
        }

        .grid-product-info-name {
            grid-area: name !important;
            align-self: stretch !important;
            min-width: 0 !important;
            padding: 0 !important;
            border-right: 0 !important;
            box-sizing: border-box !important;
            font-size: 11px !important;
            font-weight: 600 !important;
            line-height: 1.25 !important;
            color: #111827 !important;
            display: block !important;
            -webkit-line-clamp: unset !important;
            -webkit-box-orient: initial !important;
            overflow: visible !important;
            word-break: normal !important;
            overflow-wrap: break-word !important;
            hyphens: none !important;
            text-decoration: none !important;
            text-overflow: clip !important;
        }

        .grid-product-options {
            grid-area: options !important;
            display: flex !important;
            flex-direction: column !important;
            align-items: flex-start !important;
            gap: 3px !important;
            min-width: 0 !important;
            margin-top: 3px !important;
        }

        .grid-product-option-row {
            display: grid !important;
            grid-template-columns: auto minmax(0, 1fr) !important;
            align-items: center !important;
            column-gap: 8px !important;
            min-width: 0 !important;
            min-height: 12px !important;
            max-width: 100% !important;
            color: #7b8491 !important;
            width: 100% !important;
            font-size: 10px !important;
            line-height: 1.3 !important;
        }

        .grid-product-option-indicator {
            display: inline-flex !important;
            align-items: center !important;
            gap: 5px !important;
            min-width: 0 !important;
        }

        .grid-product-option-name {
            min-width: 0 !important;
            color: #374151 !important;
            font-size: 8.5px !important;
            font-weight: 600 !important;
            line-height: 1.35 !important;
            overflow-wrap: anywhere !important;
        }

        .grid-product-option-swatch {
            width: 11px !important;
            height: 11px !important;
            flex: 0 0 11px !important;
            box-sizing: border-box !important;
            border: 1px solid rgba(15, 23, 42, 0.22) !important;
            border-radius: 50% !important;
            background: var(--grid-option-color) !important;
            box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.8) inset !important;
        }

        .grid-product-option-label {
            display: inline-block !important;
            max-width: 100% !important;
            padding: 1px 5px !important;
            box-sizing: border-box !important;
            border-radius: 3px !important;
            background: #f1f3f5 !important;
            color: #4b5563 !important;
            font-size: 8.5px !important;
            font-weight: 600 !important;
            line-height: 1.35 !important;
            overflow-wrap: anywhere !important;
        }

        .grid-product-option-attributes {
            min-width: 0 !important;
            color: #8b95a3 !important;
            justify-self: end !important;
            text-align: right !important;
            font-size: 8.5px !important;
            font-weight: 400 !important;
            line-height: 1.35 !important;
            overflow-wrap: anywhere !important;
        }

        .grid-product-option-row[hidden] {
            display: none !important;
        }

        .grid-product-options.is-options-animating {
            overflow: hidden !important;
            will-change: height;
        }

        .grid-product-options-toggle {
            appearance: none !important;
            -webkit-appearance: none !important;
            display: inline-flex !important;
            width: auto !important;
            align-items: center !important;
            justify-content: flex-start !important;
            margin-top: 1px !important;
            padding: 1px 0 !important;
            border: 0 !important;
            border-radius: 0 !important;
            background: transparent !important;
            color: var(--accent-color) !important;
            font-family: inherit !important;
            font-size: 10px !important;
            font-weight: 600 !important;
            line-height: 1.3 !important;
            text-align: left !important;
            cursor: pointer !important;
            box-shadow: none !important;
        }

        .grid-product-options-toggle:hover {
            text-decoration: underline !important;
            text-underline-offset: 2px !important;
        }

        .grid-product-options-toggle:focus-visible {
            outline: 0 !important;
            text-decoration: underline !important;
            text-decoration-thickness: 1.5px !important;
            text-underline-offset: 3px !important;
        }

        .grid-product-info-price {
            grid-area: price !important;
            display: flex !important;
            flex-direction: row !important;
            justify-content: flex-end !important;
            align-items: center !important;
            align-self: end !important;
            justify-self: end !important;
            gap: 5px !important;
            min-width: 0 !important;
            padding: 3px 0 0 !important;
            box-sizing: border-box !important;
            font-size: 11px !important;
            line-height: 1.2 !important;
            color: #6b7280 !important;
            white-space: nowrap !important;
            text-align: right !important;
        }

        .grid-product-info-price-old {
            color: #9ca3af !important;
            font-size: 9px !important;
            line-height: 1.1 !important;
            text-decoration: line-through !important;
        }

        .grid-product-info-price-new {
            color: #1d1d1d !important;
            display: block !important;
            font-weight: 600 !important;
        }

        .grid-product-info-price-current {
            color: inherit !important;
            display: block !important;
        }

        .grid-product-info-price.has-sale .grid-product-info-price-current {
            color: #16a34a !important;
            font-weight: 600 !important;
        }

        /* Solo en tarjetas excepcionalmente angostas el precio toma una línea propia. */
        @container (max-width: 170px) {
            .grid-product-info-row {
                grid-template-columns: minmax(0, 1fr) !important;
                grid-template-areas:
                    "name"
                    "options"
                    "price" !important;
            }

            .grid-product-info-price {
                min-width: 0 !important;
                justify-self: end !important;
                padding-top: 2px !important;
            }
        }

        .grid-delete-btn {
            position: absolute !important;
  top: 6px !important;
  right: 6px !important;
  background: rgba(255, 255, 255, 0.7) !important;
  color: rgba(220, 38, 38, 0.7) !important;
  border: none !important;
  border-radius: 50% !important;
  width: 22px !important;
  height: 22px !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  z-index: 10 !important;
  transition: all 0.2s ease !important;
  opacity: 1 !important;
  padding: 0 !important;
        }

        .grid-delete-btn:hover {
          
        }

        .catalog-main.grid-mode {
            display: none !important;
        }
        
        .catalog-main.grid-mode + .micatalogo-footer {
            display: none !important;
        }

        .grid-view.grid-mode {
            display: block !important;
        }

        /* Responsive */
        @media (max-width: 768px) {
            .grid-delete-btn {
                top: 4px !important;
                right: 4px !important;
                width: 20px !important;
                height: 20px !important;
            }
            
            .grid-delete-btn svg {
                width: 10px !important;
                height: 10px !important;
            }

            .catalog-header {
                padding: 1rem !important;
            }

            .grid-container {
                gap: 16px !important;
            }

            .grid-category-header {
                flex-direction: column !important;
                align-items: flex-start !important;
            }

            .grid-category-actions {
                width: 100% !important;
                justify-content: space-between !important;
            }

            .grid-category-images {
                column-gap: 10px !important;
                row-gap: 0 !important;
            }
 
            .grid-category-images--all {
                grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
            }

            .grid-category-images--all > .grid-item {
                margin-bottom: 10px !important;
                grid-column: auto !important;
            }

            .grid-category-images--all > .grid-item:nth-child(2n + 1) {
                grid-column: 1 !important;
            }

            .grid-category-images--all > .grid-item:nth-child(2n) {
                grid-column: 2 !important;
            }

            .grid-category-images--carousel {
                --grid-image-columns: 2;
                --grid-carousel-gap: 10px;
                gap: var(--grid-carousel-gap) !important;
                grid-auto-columns: calc((100% - var(--grid-carousel-gap)) / 2) !important;
            }

            .grid-image {
                aspect-ratio: 4/6 !important;
            }

            .business-name {
                font-size: 1.5rem;
            }
            
            .business-description {
                font-size: 0.875rem;
            }
            
            .nav-btn {
                padding: 0.4rem 1rem;
                font-size: 0.875rem;
            }
            
            /* Zonas más grandes en móvil para mejor touch */
            .product-zone {
              /*  min-width: 80px; */
              /*  min-height: 60px; */
            }
            
            .product-indicator {
                padding: 8px 12px;
                font-size: 13px;
                min-width: 100px;
                max-width: 180px;
            }
            
          
            
            .add-icon {
                width: 28px;
                height: 28px;
                font-size: 16px;
            }
        }

        @media (min-width: 1024px) {
            .catalog-main {
                padding: 0 2rem 0px 2rem;
                max-width: 800px; /* Mantener límite en desktop */
            }
            
            /* Categorías con mismo padding interno en desktop */
            .navigation-wrapper .page-navigation {
                padding: 1rem 2rem !important; /* Mismo padding lateral que catalog-main en desktop */
            }
            
            .cart-container {
                max-width: 900px;
                left: 50%;
                bottom: 70px; /* Arriba del menú inferior también en desktop */
                transform: translateX(-50%);
                border-radius: var(--border-radius);
            }
            
            .cart-container.hidden {
                transform: translateX(-50%) translateY(calc(100% + 70px));
            }
        }

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

        /* MENSAJE DE BIENVENIDA DEL CARRITO */
        .welcome-cart {
            padding: 24px 20px !important;
            text-align: center !important;
            background: linear-gradient(135deg, var(--color-surface-slate) 0%, var(--color-surface-slate-2) 100%) !important;
            border-radius: 12px 12px 0 0 !important;
        }

        .welcome-content {
            max-width: 280px !important;
            margin: 0 auto !important;
        }

        .welcome-message {
            font-size: 16px !important;
            font-weight: 600 !important;
            color: var(--color-slate-900) !important;
            margin: 0 0 8px 0 !important;
            line-height: 1.4 !important;
            letter-spacing: -0.01em !important;
        }

        .welcome-instruction {
            font-size: 14px !important;
            color: var(--color-text-slate) !important;
            font-weight: 400 !important;
            line-height: 1.4 !important;
            margin: 0 !important;
            display: block !important;
        }




        /* Modo gestión activo - contorno verde oscuro */
        .catalog-image.management-mode-active {
            box-shadow: 0 0 0 3px #2d5a2d !important; /* Contorno verde oscuro suave */
        }

        /* ZONA INVISIBLE - Base para productos */
.product-zone {
    border: none !important;
    background: transparent !important;
    transition: opacity 0.3s ease, background 0.3s ease !important;
            cursor: pointer !important;
            position: absolute !important;
            box-shadow: none !important;
            outline: none !important;
            display: flex !important;
            align-items: center !important;
            justify-content: center !important;
            width: 60px !important;
            height: 60px !important;
            transform: translate(-50%, -50%) !important;
            /* Evitar drag y selección */
            -webkit-user-select: none !important;
            -moz-user-select: none !important;
            -ms-user-select: none !important;
            user-select: none !important;
            -webkit-tap-highlight-color: transparent !important;
            outline: none !important;
            -webkit-touch-callout: none !important;
            -webkit-user-drag: none !important;
            -khtml-user-drag: none !important;
            -moz-user-drag: none !important;
            -o-user-drag: none !important;
            user-drag: none !important;
            pointer-events: auto !important;
    /* Evitar context menu y long press */
    touch-action: manipulation !important;
    /* Siempre por encima de los textos superpuestos (z-index 5). */
    z-index: 6 !important;
    overflow: visible !important;
}

/* El estado de navegación tiene prioridad sobre cualquier estado del producto.
   Una página/categoría inactiva no puede exponer hotspots invisibles. */
.category-container.hidden .product-zone,
.category-container[inert] .product-zone,
.category-container[aria-hidden="true"] .product-zone,
.catalog-page[inert] .product-zone,
.catalog-page[aria-hidden="true"] .product-zone {
    visibility: hidden !important;
    pointer-events: none !important;
}

        .product-zone:hover {
            background: transparent !important;
            border: none !important;
            box-shadow: none !important;
        }

        .product-zone:active {
            transform: translate(-50%, -50%) !important;
        }

        .product-zone.has-items {
            background: transparent;
            border: none;
        }

        /* Efecto aura/ripple para  indicar que es clickeable */
        @keyframes auraRipple {
            0% {
                transform: translate(-50%, -50%) scale(1);
                opacity: 0.6;
            }
            100% {
                transform: translate(-50%, -50%) scale(1.8);
                opacity: 0;
            }
        }

        /* CÍRCULO VERDE - Solo el ícono del carrito */
.product-cart-icon {
    background: #232b35 !important;
    border-radius: 50% !important;
    width: 35px !important;
    height: 35px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    flex-shrink: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    position: absolute !important;
    top: 50% !important;
    left: 6px !important;
    transform: translateY(-50%) !important;
    z-index: 10 !important;
    pointer-events: none !important;

    box-shadow: none !important;

    /* Evitar drag */
    -webkit-user-drag: none !important;
    -khtml-user-drag: none !important;
    -moz-user-drag: none !important;
    -o-user-drag: none !important;
    user-drag: none !important;
    user-select: none !important;
}
        
        /* Aura pulsante alrededor del ícono */
.product-cart-icon::before {
    content: none !important;
    display: none !important;
}

        /* TEXTO SEPARADO DEL ÍCONO */
.product-text-info {
    position: absolute !important;
    top: 50% !important;
    left: -5px !important;
    transform: translateY(-50%) translateX(-2%) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: center !important;
    text-align: left !important;
    background: rgba(255, 255, 255, 0.98) !important;
    border-radius: 999px !important;
    border: 1px solid rgba(15, 23, 42, 0.08) !important;
    padding: 8px 16px 8px 58px !important;
    box-shadow: 0 2px 5px rgba(15, 23, 42, 0.16) !important;    z-index: 9 !important;
    pointer-events: none !important;
    white-space: nowrap !important;
    width: max-content !important;
    min-height: 46px !important;
    
    font-family: var(--font-family-ui) !important;
}

        /* CONTENEDOR DE TEXTO - Mantenido para compatibilidad */  
.product-details, 
.product-text-info {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    text-align: left !important;
    width: max-content !important;
  
}

        /* NOMBRE DEL PRODUCTO - Mejorado para texto separado */
.product-text-info .product-name,
.product-details .product-name,
.product-name {
    font-weight: 700 !important;
    color: #1e40af !important;
    font-size: 12px !important;
    line-height: 1.15 !important;
    margin: 0 10px 2px 0 !important;
    text-align: left !important;
    word-wrap: normal !important;
    overflow-wrap: normal !important;
    word-break: keep-all !important;
    hyphens: none !important;
    max-width: 120px !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.product-text-info .product-attribute,
.product-details .product-attribute,
.product-attribute {
    font-weight: 400 !important;
    color: #6b7280 !important;
    font-size: 9px !important;
    line-height: 1.15 !important;
    margin: 0 0 2px 0 !important;
    text-align: left !important;
    font-style: normal !important;
    word-wrap: normal !important;
    overflow-wrap: normal !important;
    word-break: keep-all !important;
    max-width: 150px !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

        /* PRECIO DEL PRODUCTO - Mejorado para texto separado */
.product-text-info .product-price,
.product-details .product-price,
.product-price {
    font-size: 11px !important;
    color: #111827 !important;
    font-weight: 600 !important;
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    display: inline-block !important;
    text-align: left !important;
    line-height: 1.15 !important;
}
        


@media (max-width: 768px) {
    .product-text-info {
        position: absolute !important;
        top: 50% !important;
        left: -5px !important;
        transform: translateY(-50%)  !important;
    }
}

        /* Carrusel: sin transiciones en hotspots  mientras anima (flip V6) */
        body.mc-is-animating .product-cart-icon,
        body.mc-is-animating .product-text-info,
        body.mc-is-animating .product-zone {
            transition: none !important;
        }

        /* ===== Flip pill (propietario): clase en .product-zone ===== */
        .product-zone.is-flipped .product-text-info {
            left: auto !important;
            right: -5px !important;
            transform: translateY(-50%) translateX(2%) !important;
            padding-top: 8px !important;
            padding-right: 58px !important;
            padding-bottom: 8px !important;
            padding-left: 16px !important;
            align-items: flex-start !important;
            text-align: left !important;
        }

        .product-zone.is-flipped .product-text-info .product-name,
        .product-zone.is-flipped .product-text-info .product-attribute,
        .product-zone.is-flipped .product-text-info .product-price,
        .product-zone.is-flipped .product-text-info .product-price-original,
        .product-zone.is-flipped .product-text-info .product-price-sale {
            text-align: left !important;
        }

        .product-zone.is-flipped .product-text-info .product-name {
            max-width: 160px !important;
        }

        .product-zone.is-flipped .product-text-info .product-attribute {
            max-width: 180px !important;
        }

        .product-zone.is-flipped .product-cart-icon {
            left: auto !important;
            right: 6px !important;
            transform: translateY(-50%) !important;
        }

        @media (max-width: 768px) {
            .product-zone.is-flipped .product-text-info {
                left: auto !important;
                right: -5px !important;
                transform: translateY(-50%) !important;
                padding-top: 8px !important;
                padding-right: 58px !important;
                padding-bottom: 8px !important;
                padding-left: 16px !important;
                align-items: flex-start !important;
                text-align: left !important;
            }
        }

        /* Precio de productos de consulta - usa el color del tema */
        .product-price.quote-price {
            color: var(--accent-color) !important;
            font-style: italic;
            text-decoration: none !important;
        }

        /* EFECTOS HOVER */

        
        /* DRAG & DROP PRODUCTOS (propietario) */
        .product-zone.drag-ready {
            cursor: grab !important;
        }
        
        .product-zone.dragging {
            cursor: grabbing !important;
            z-index: 100 !important;
            opacity: 0.9;
        }
        
.product-zone.dragging .product-cart-icon {
}

.product-zone.dragging .product-text-info {
    transform: translateY(-50%) scale(1.03) !important;
    box-shadow: 0 5px 5px rgba(15, 23, 42, 0.24) !important;
}

        .product-zone.is-flipped.dragging .product-cart-icon {
            left: auto !important;
            right: 6px !important;
            transform: translateY(-50%) scale(1.05) !important;
        }

        .product-zone.is-flipped.dragging .product-text-info {
            transform: translateY(-50%) translateX(2%) scale(1.03) !important;
            box-shadow: 0 5px 5px rgba(15, 23, 42, 0.24) !important;
        }

        @media (max-width: 768px) {
            .product-zone.is-flipped.dragging .product-text-info {
                transform: translateY(-50%) scale(1.03) !important;
            }
        }

        /* Badge de descuento por cantidad en hotspot */
        .product-discount-qty-badge {
            position: absolute !important;
            top: -4px !important;
            right: -4px !important;
            background: #ff9800 !important;
            color: var(--color-white) !important;
            font-size: 10px !important;
            font-weight: 700 !important;
            width: 18px !important;
            height: 18px !important;
            border-radius: 50% !important;
            display: flex !important;
            align-items: center !important;
            justify-content: center !important;
            box-shadow: 0 1px 4px rgba(0,0,0,0.3) !important;
            z-index: 15 !important;
            line-height: 1 !important;
        }
        
        /* ESTADO SELECCIONADO - Círculo blanco cuando hay items */
.product-zone.has-items .product-cart-icon {
    background: var(--accent-color, #4CAF50) !important;
    color: var(--color-white) !important;
    box-shadow: 0 12px 24px rgba(76, 175, 80, 0.28) !important;
}

.product-zone.has-items .product-cart-icon svg,
.product-zone.has-items .product-cart-icon svg path,
.product-zone.has-items .product-cart-icon svg * {
    fill: var(--color-white) !important;
    color: var(--color-white) !important;
}

.product-zone.has-items .product-text-info {
    background: var(--color-white) !important;
    border-color: rgba(76, 175, 80, 0.24) !important;
    box-shadow: 0 12px 28px rgba(76, 175, 80, 0.16) !important;
}
        
        /* PRODUCTO AGOTADO - Estilos para cuando is_available = 0 */
        /* IMPORTANTE: NO ocultar, solo mostrar gris y bloqueado */
        .product-zone.unavailable,
        .product-zone[data-product-available="0"] {
            opacity: 1 !important;
            filter: none !important;
        }
        .product-zone.unavailable .product-cart-icon,
        .product-zone[data-product-available="0"] .product-cart-icon {
            background: var(--color-text-muted) !important;
            border-color: #4b5563 !important;
            box-shadow: none !important;
        }
        .product-zone.unavailable .product-cart-icon svg,
        .product-zone[data-product-available="0"] .product-cart-icon svg {
            fill: #9ca3af !important;
            color: #9ca3af !important;
        }
        .product-zone.unavailable.dot-style .product-cart-icon,
        .product-zone[data-product-available="0"].dot-style .product-cart-icon {
            background: var(--color-text-muted) !important;
            border-color: #4b5563 !important;
        }
.product-zone.unavailable .product-text-info,
.product-zone[data-product-available="0"] .product-text-info {
    margin-top: 0 !important;
}
        .product-zone.unavailable .product-name,
        .product-zone[data-product-available="0"] .product-name {
            color: #d1d5db !important;
            text-decoration: line-through !important;
        }
        .product-zone.unavailable .product-price,
        .product-zone[data-product-available="0"] .product-price {
            color: #9ca3af !important;
            text-decoration: line-through !important;
        }
        /* Texto AGOTADO - sutil, debajo del precio */
        .product-agotado {
            display: none !important;
        }
        .product-zone.unavailable .product-agotado,
        .product-zone[data-product-available="0"] .product-agotado {
            display: block !important;
            color: var(--color-text-muted) !important;
            font-size: 10px !important;
            font-weight: 700 !important;
            line-height: 1.1 !important;
            letter-spacing: 0.01em !important;
            margin-top: 2px !important;
            opacity: 1 !important;
        }

        /* SVG DEL CARRITO - FORZAR COLOR BLANCO INMEDIATAMENTE */
        .product-cart-icon svg,
        .product-cart-icon svg path,
        .product-cart-icon svg * {
            width: 22px !important;
            height: 22px !important;
            fill: var(--color-white) !important;
            color: var(--color-white) !important;
            stroke: none !important;
            transition: none !important;
        }

        /*
         * Marcador compacto solo en escritorio.
         *
         * La zona invisible conserva sus 60 × 60 px y sus coordenadas
         * porcentuales. Solo se reduce la parte visible, por lo que no cambia
         * la posición guardada ni el área táctil utilizada en celular.
         */
        @media (min-width: 769px) {
            .product-cart-icon {
                width: 29px !important;
                height: 29px !important;
                left: 5px !important;
            }

            .product-cart-icon svg,
            .product-cart-icon svg path,
            .product-cart-icon svg * {
                width: 17px !important;
                height: 17px !important;
            }

            .product-text-info {
                padding: 6px 12px 6px 46px !important;
                min-height: 37px !important;
            }

            .product-text-info .product-name {
                max-width: 110px !important;
                margin: 0 6px 1px 0 !important;
                font-size: 10px !important;
            }

            .product-text-info .product-attribute {
                max-width: 124px !important;
                margin-bottom: 1px !important;
                font-size: 8px !important;
            }

            .product-text-info .product-price,
            .product-text-info .product-price-original,
            .product-text-info .product-price-sale {
                font-size: 9px !important;
            }

            .product-zone.is-flipped .product-text-info {
                padding: 6px 46px 6px 12px !important;
            }

            .product-zone.is-flipped .product-text-info .product-name {
                max-width: 126px !important;
            }

            .product-zone.is-flipped .product-text-info .product-attribute {
                max-width: 140px !important;
            }

            .product-zone.is-flipped .product-cart-icon {
                right: 5px !important;
            }
        }

        /*
         * Marcador de carrito sin nombre ni precio.
         *
         * El círculo del carrito es el ancla visual y nunca cambia de forma.
         * La cápsula de acción nace por detrás del círculo y se extiende hacia
         * el centro de la imagen. La zona táctil y las coordenadas guardadas
         * siguen perteneciendo a .product-zone (60 × 60 px).
         */
        .product-zone.product-zone--icon-only {
            --mc-marker-compact-size: 43px;
            --mc-marker-compact-half: 21.5px;
            --mc-marker-expanded-width: 116px;
            --mc-marker-capsule-surface: rgba(255, 255, 255, 0.98);
        }

        .product-zone.product-zone--icon-only .product-text-info--icon-only,
        .product-zone.product-zone--icon-only.is-flipped .product-text-info--icon-only {
            top: 50% !important;
            left: 50% !important;
            right: auto !important;
            width: var(--mc-marker-compact-half) !important;
            min-width: var(--mc-marker-compact-half) !important;
            height: var(--mc-marker-compact-size) !important;
            min-height: var(--mc-marker-compact-size) !important;
            padding: 0 !important;
            transform: translateY(-50%) !important;
            border-radius: 0 999px 999px 0 !important;
            box-sizing: border-box !important;
            box-shadow: none !important;
            overflow: hidden !important;
            transition:
                width 0.32s cubic-bezier(0.22, 1, 0.36, 1),
                min-width 0.32s cubic-bezier(0.22, 1, 0.36, 1) !important;
            z-index: 9 !important;
        }

        .product-zone.product-zone--icon-only.is-flipped .product-text-info--icon-only {
            left: auto !important;
            right: 50% !important;
            border-radius: 999px 0 0 999px !important;
        }

        .product-zone.product-zone--icon-only .product-cart-icon,
        .product-zone.product-zone--icon-only.is-flipped .product-cart-icon,
        .product-zone.product-zone--icon-only.is-flipped.dragging .product-cart-icon {
            top: 50% !important;
            left: 50% !important;
            right: auto !important;
            width: var(--mc-marker-compact-size) !important;
            height: var(--mc-marker-compact-size) !important;
            transform: translate(-50%, -50%) !important;
            border: 4px solid var(--mc-marker-capsule-surface) !important;
            box-sizing: border-box !important;
            box-shadow: none !important;
            z-index: 10 !important;
        }

        .product-zone.product-zone--icon-only .product-marker-cta {
            position: absolute !important;
            top: 0 !important;
            bottom: 0 !important;
            left: calc(var(--mc-marker-compact-half) + 8px) !important;
            right: auto !important;
            transform: translateY(-1px) !important;
            color: #111827 !important;
            font-size: 12px !important;
            font-weight: 700 !important;
            line-height: 1 !important;
            white-space: nowrap !important;
            display: flex !important;
            align-items: center !important;
            opacity: 0 !important;
            transition: opacity 0.16s ease 0.09s !important;
            pointer-events: none !important;
        }

        .product-zone.product-zone--icon-only.is-flipped .product-marker-cta {
            left: auto !important;
            right: calc(var(--mc-marker-compact-half) + 8px) !important;
            text-align: right !important;
        }

        .product-zone.product-zone--icon-only.is-cta-expanded .product-text-info--icon-only {
            width: calc(var(--mc-marker-expanded-width) - var(--mc-marker-compact-half)) !important;
            min-width: calc(var(--mc-marker-expanded-width) - var(--mc-marker-compact-half)) !important;
        }

        .product-zone.product-zone--icon-only.is-cta-expanded .product-marker-cta {
            opacity: 1 !important;
        }

        @media (min-width: 769px) {
            .product-zone.product-zone--icon-only {
                --mc-marker-compact-size: 37px;
                --mc-marker-compact-half: 18.5px;
                --mc-marker-expanded-width: 104px;
            }

            .product-zone.product-zone--icon-only .product-marker-cta {
                font-size: 11px !important;
            }
        }

        @media (prefers-reduced-motion: reduce) {
            .product-zone.product-zone--icon-only .product-text-info--icon-only,
            .product-zone.product-zone--icon-only .product-marker-cta {
                transition: none !important;
            }
        }

        /* Badge de cantidad */
        .product-badge {
            position: absolute;
            top: 2%;
            right: 3%;
            background: var(--primary-color);
            color: var(--color-white);
            border-radius: 50%;
            width: 24px;
            height: 24px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 0.75rem;
            font-weight: 600;
            box-shadow: var(--shadow);
            animation: bounceIn 0.5s ease;
            z-index: 10;
        }

        .product-badge.hidden {
            display: none !important;
        }

        /* Animaciones */
        

        @keyframes bounceIn {
            0% { transform: scale(0); }
            50% { transform: scale(1.2); }
            100% { transform: scale(1); }
        }

        /* VARIANTES EN GRID DE CARDS */
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
         
        /* ═══════════════════════════════════════════════════════════════
           VARIANTES AGRUPADAS (V2 con dos dimensiones)
           ═══════════════════════════════════════════════════════════════ */
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        



/* Marcador clásico: productos fuera de la foto, en botones de ancho completo. */
.classic-product-list {
    display: none;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    gap: 10px;
    margin: 12px 0 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    overflow: visible;
}

body.marker-style-classic .catalog-page:not(.empty-slot) .classic-product-list:not(:empty) {
    display: grid;
}

/* En administración, la propia barra inferior reemplaza la lista duplicada. */
body.is-catalog-owner.marker-style-classic .catalog-page:not(.empty-slot) > .product-list-container {
    display: none !important;
}

body.is-catalog-owner.marker-style-classic .product-image-footer-actions,
body.is-catalog-owner.marker-style-classic .product-image-footer-actions .product-management-bar {
    display: flex !important;
}

/* En la vista cliente los botones clásicos forman parte del contenido exterior,
   no del fondo visual reservado para la fotografía. */
body:not(.is-catalog-owner).marker-style-classic .catalog-page:not(.empty-slot) {
    background: var(--background, #f3f4f6);
}

/* La pista se desplaza horizontalmente y puede dejar ver el fondo de apoyo
   entre dos páginas durante unas décimas de segundo. En este modo ese fondo
   también pertenece al contenido exterior y debe usar el color del tema. */
body:not(.is-catalog-owner).marker-style-classic .category-carousel,
body:not(.is-catalog-owner).marker-style-classic .category-carousel > .carousel-track {
    background: var(--background, #f3f4f6);
}

body:not(.is-catalog-owner).marker-style-classic .category-carousel {
    z-index: 1;
    box-shadow: 0 0 0 2px var(--background, #f3f4f6);
}

body:not(.is-catalog-owner).marker-style-classic .category-carousel .image-container {
    box-shadow: none;
}

body.marker-style-classic .image-container > .product-zone {
    display: none !important;
}

body.marker-style-classic .product-toggle-btn {
    display: none !important;
}

/* Contador de vistas por imagen: sólo icono y cifra, sin competir con la foto. */
.catalog-image-view-count {
    position: absolute;
    z-index: 12;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
    min-width: 0;
    min-height: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: rgba(255, 255, 255, 0.78);
    font-size: 10px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0.01em;
    box-sizing: border-box;
    pointer-events: none;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.72);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.catalog-image-view-count svg {
    display: block;
    flex: 0 0 auto;
    width: 12px;
    height: 12px;
    fill: currentColor;
    opacity: 0.82;
}

.catalog-image-view-count--carousel {
    top: 12px;
    left: 12px;
    right: auto;
}

.catalog-image-view-count--grid {
    top: 8px;
    left: 8px;
    right: auto;
}

body.theme-negro .catalog-image-view-count {
    border-color: transparent;
    background: transparent;
    color: rgba(255, 255, 255, 0.76);
}

body.theme-matrix .catalog-image-view-count {
    border-color: transparent;
    background: transparent;
    color: rgba(184, 255, 203, 0.76);
}

.classic-product-button {
    display: flex;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    min-height: 0;
    box-sizing: border-box;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 15px 14px 17px;
    border: 0;
    border-bottom: 1px solid #e5e7eb;
    border-radius: 0;
    background: transparent;
    color: #1f2937;
    font: inherit;
    text-align: left;
    overflow: hidden;
}

.classic-product-list > .classic-product-button:last-child {
    border-bottom: 0;
}

.classic-product-button__copy {
    display: flex;
    width: 0;
    max-width: 100%;
    flex: 1 1 0%;
    flex-direction: column;
    min-width: 0;
}

.classic-product-admin-entry,
.classic-product-client-entry {
    position: relative;
    display: block;
    width: 100%;
    min-width: 0;
    padding: 0;
    box-sizing: border-box;
    overflow: hidden;
    border: 0;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 3px 12px rgba(15, 23, 42, 0.08);
    transition: box-shadow 160ms ease, transform 160ms ease;
}

.classic-product-list > .classic-product-admin-entry:last-child,
.classic-product-list > .classic-product-client-entry:last-child {
    border-bottom: 0;
}

.classic-product-admin-entry:focus-within,
.classic-product-client-entry:focus-within {
    box-shadow:
        0 3px 12px rgba(15, 23, 42, 0.08),
        0 0 0 2px color-mix(in srgb, var(--accent-color, #10b981) 28%, transparent);
}

.classic-product-admin-entry__main,
.classic-product-client-entry__main {
    display: block;
    min-height: 0;
    padding: 16px 15px 14px 17px;
    background: #fff;
}

.classic-product-admin-entry .classic-product-button--admin,
.classic-product-client-entry .classic-product-button {
    width: 100%;
    min-width: 0;
    min-height: auto;
    flex: 1 1 auto;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    cursor: default;
    overflow: hidden;
    transition: none;
}

:is(.classic-product-admin-entry, .classic-product-client-entry) .classic-product-button__copy {
    display: grid;
    width: 100%;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: baseline;
    column-gap: 14px;
}

:is(.classic-product-admin-entry, .classic-product-client-entry) .classic-product-button__name {
    grid-column: 1;
    grid-row: 1;
}

:is(.classic-product-admin-entry, .classic-product-client-entry) .classic-product-button__attribute,
:is(.classic-product-admin-entry, .classic-product-client-entry) .classic-product-button__options {
    grid-column: 1 / -1;
}

:is(.classic-product-admin-entry, .classic-product-client-entry) .classic-product-button__copy > .classic-product-button__price-row {
    width: auto;
    grid-column: 2;
    grid-row: 1;
    justify-content: flex-end;
    align-self: baseline;
    margin: 0;
}

:is(.classic-product-admin-entry, .classic-product-client-entry) .classic-product-button__name,
:is(.classic-product-admin-entry, .classic-product-client-entry) .classic-product-button__price {
    font-size: 14px;
    font-weight: 700;
    line-height: 1.25;
}

.classic-product-admin-entry .classic-product-button__kind-badge {
    display: inline-flex;
    min-height: 24px;
    grid-column: 2;
    grid-row: 1;
    align-items: center;
    align-self: baseline;
    padding: 4px 8px;
    border: 1px solid color-mix(in srgb, var(--accent-color, #10b981) 34%, #d8dde5);
    border-radius: 999px;
    background: color-mix(in srgb, var(--accent-color, #10b981) 7%, #fff);
    color: var(--accent-color, #10b981);
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
}

:is(.classic-product-admin-entry, .classic-product-client-entry) .classic-product-button__options {
    gap: 3px;
    margin-top: 9px;
}

:is(.classic-product-admin-entry, .classic-product-client-entry) .classic-product-button__option-row {
    color: #6b7280;
    font-size: 11.5px;
    font-weight: 400;
}

.classic-product-admin-entry .classic-product-button--admin:hover,
.classic-product-admin-entry .classic-product-button--admin:focus-visible,
.classic-product-admin-entry .classic-product-button--admin:active,
.classic-product-client-entry .classic-product-button:hover,
.classic-product-client-entry .classic-product-button:focus-visible,
.classic-product-client-entry .classic-product-button:active {
    border-color: transparent;
    background: transparent;
    outline: 0;
    transform: none;
}

.classic-product-admin-entry__toolbar,
.classic-product-client-entry__toolbar {
    display: flex;
    min-height: 44px;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 6px 10px 6px 18px;
    border-top: 1px solid #edf0f4;
    background: #fafbfc;
}

.classic-product-admin-entry__code {
    display: inline-flex;
    min-width: 0;
    align-items: baseline;
    gap: 5px;
    overflow: hidden;
    color: #6b7280;
    font-size: 10px;
    font-weight: 500;
    line-height: 1;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.classic-product-admin-entry__code-value {
    overflow: hidden;
    color: #475569;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.035em;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.classic-product-admin-entry__actions {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
}

.classic-product-button__client-action,
.classic-product-button__admin-action {
    appearance: none;
    -webkit-appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    cursor: pointer;
}

.classic-product-button__client-action {
    max-width: 42%;
    flex: 0 1 auto;
    margin-left: 0;
}

.classic-product-button__client-action .classic-product-button__meta {
    max-width: 100%;
    margin-left: 0;
}

.classic-product-client-entry .classic-product-button__client-action {
    max-width: none;
    flex: 0 0 auto;
    margin-left: 0;
}

.classic-product-client-entry .classic-product-button__client-action .classic-product-button__meta {
    min-height: 30px;
    max-width: none;
    gap: 5px;
    margin-left: 0;
    padding: 6px 10px;
    border-radius: 7px;
    font-size: 10px;
}

.classic-product-button__admin-action .classic-product-button__meta {
    margin-left: 0;
    min-height: 30px;
    max-width: none;
    gap: 5px;
    padding: 6px 9px;
    border: 1px solid color-mix(in srgb, var(--accent-color, #10b981) 38%, #d8dde5);
    border-radius: 7px;
    background: transparent;
    color: var(--accent-color, #10b981);
    font-size: 10px;
}

.classic-product-button__admin-action .classic-product-button__action-label {
    display: inline-flex;
    align-items: center;
    height: 16px;
    line-height: 16px;
}

.classic-product-button__admin-action .classic-product-button__icon {
    position: relative;
    top: 0.5px;
}

.classic-product-button__admin-action .classic-product-button__action-label {
    position: static;
}

.classic-product-button__client-action:hover .classic-product-button__meta,
.classic-product-button__client-action:focus-visible .classic-product-button__meta,
.classic-product-button__admin-action:hover .classic-product-button__meta,
.classic-product-button__admin-action:focus-visible .classic-product-button__meta {
    filter: brightness(0.94);
    transform: translateY(-1px);
}

.classic-product-button__client-action:focus-visible,
.classic-product-button__admin-action:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--accent-color, #10b981) 24%, transparent);
    outline-offset: 2px;
    border-radius: 7px;
}

.classic-product-button__delete {
    appearance: none;
    -webkit-appearance: none;
    position: static;
    display: inline-flex;
    min-height: 30px;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    gap: 5px;
    margin: 0;
    padding: 6px 9px;
    border: 1px solid color-mix(in srgb, #dc2626 34%, #d8dde5);
    border-radius: 7px;
    background: transparent;
    color: #dc2626;
    font: inherit;
    font-size: 10px;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    transition: background-color 160ms ease, color 160ms ease;
}

.classic-product-button__delete:hover,
.classic-product-button__delete:focus-visible {
    background: #fef2f2;
    color: #b91c1c;
}

.classic-product-button__delete:focus-visible {
    outline: 2px solid color-mix(in srgb, #dc2626 30%, transparent);
    outline-offset: -3px;
}

.classic-product-button__delete svg {
    width: 12px;
    height: 12px;
    fill: currentColor;
}

@media (max-width: 420px) {
    .classic-product-admin-entry__main,
    .classic-product-client-entry__main {
        padding: 12px 10px 12px 14px;
    }

    .classic-product-admin-entry__toolbar,
    .classic-product-client-entry__toolbar {
        padding-left: 14px;
    }

    .classic-product-button__admin-action .classic-product-button__meta {
        gap: 5px;
        min-height: 30px;
        padding: 6px 8px;
        font-size: 10px;
    }

    .classic-product-button__client-action {
        margin-left: 10px;
    }

    .classic-product-button__client-action .classic-product-button__meta {
        gap: 5px;
        padding: 8px 12px;
        font-size: 12px;
    }
}

.classic-product-button__name {
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    color: inherit;
    font-size: 14px;
    font-weight: 650;
    line-height: 1.25;
    margin-bottom: 0;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.classic-product-button__attribute {
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    color: #6b7280;
    font-size: 11.5px;
    font-weight: 400;
    line-height: 1.3;
    margin-top: 4px;
    margin-bottom: 8px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.classic-product-button__options {
    display: flex;
    width: 100%;
    min-width: 0;
    flex-direction: column;
    gap: 4px;
    margin-top: 7px;
}

.classic-product-button__option-row {
    display: flex;
    width: 100%;
    min-width: 0;
    flex-wrap: wrap;
    align-items: baseline;
    column-gap: 5px;
    row-gap: 2px;
    color: #111827;
    font-size: 12.5px;
    font-weight: 450;
    line-height: 1.25;
}

.classic-product-button__option-indicator {
    display: inline-flex;
    min-width: 0;
    align-items: center;
    gap: 6px;
}

.classic-product-button__option-swatch {
    display: inline-block;
    width: 11px;
    height: 11px;
    flex: 0 0 11px;
    box-sizing: border-box;
    border: 1px solid color-mix(in srgb, var(--classic-option-color) 72%, #111827);
    border-radius: 50%;
    background: var(--classic-option-color);
    box-shadow: 0 0 0 1.5px #fff inset;
}

.classic-product-button__option-label {
    min-width: 0;
    overflow-wrap: anywhere;
}

.classic-product-button__option-attributes {
    color: #7b8491;
    font-size: 11.5px;
    font-weight: 400;
    text-align: left;
    overflow-wrap: anywhere;
}

.classic-product-button__option-attributes::before {
    content: "·";
    margin-right: 5px;
    color: #c6cbd3;
}

.classic-product-button__options-more {
    margin-top: 2px;
    color: var(--accent-color, #10b981);
    font-size: 12.5px;
    font-weight: 700;
    line-height: 1.25;
}

.classic-product-button__price-row {
    display: flex;
    width: 100%;
    align-items: baseline;
    justify-content: flex-end;
    gap: 6px;
    min-width: 0;
    margin: 0;
}

.classic-product-button__name + .classic-product-button__price-row {
    margin-top: 8px;
}

.classic-product-button__price {
    color: #111827;
    font-size: 16px;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
}

.classic-product-button__meta {
    display: inline-flex;
    flex: 0 0 auto;
    max-width: 42%;
    align-items: center;
    justify-content: center;
    gap: 7px;
    margin-left: 16px;
    min-height: 36px;
    box-sizing: border-box;
    padding: 8px 15px;
    border-radius: 999px;
    background: var(--accent-color, #10b981);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
    overflow: hidden;
    transition: filter 160ms ease, transform 160ms ease;
}

.classic-product-button__action-label,
.classic-product-button__status {
    overflow: hidden;
    text-overflow: ellipsis;
}

.classic-product-button__price-old {
    color: #9ca3af;
    font-size: 0.72rem;
    font-weight: 500;
    text-decoration: line-through;
}

.classic-product-button__icon {
    display: inline-flex;
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
    align-items: center;
    justify-content: center;
    color: inherit;
}

.classic-product-button__icon svg {
    display: block;
    width: 16px;
    height: 16px;
    fill: currentColor;
}

.classic-product-button__icon.is-external {
    font-size: 18px;
    font-weight: 700;
    line-height: 1;
}

.classic-product-button.is-unavailable {
    border-color: #d1d5db;
    background: #f7f8fa;
    color: #6b7280;
}

.classic-product-button.is-unavailable .classic-product-button__meta {
    background: #9ca3af;
    color: #fff;
}

/* En la lista pública, la fila de nombre/precio conserva el estado pero no un fondo gris. */
.classic-product-client-entry .classic-product-button.is-unavailable {
    border-color: transparent;
    background: transparent;
}

@media (max-width: 520px) {
    .classic-product-list {
        gap: 8px;
        margin-top: 10px;
    }

    .classic-product-button {
        padding: 14px 16px;
    }

    .classic-product-button__option-row {
        column-gap: 5px;
    }
}

@media (max-width: 359px) {
    .classic-product-button {
        padding: 13px 12px;
    }

    .classic-product-button__meta {
        gap: 5px;
        margin-left: 8px;
        padding: 8px 12px;
        font-size: 12px;
    }
}
        /* BOTTOM SHEET */
        .bottom-sheet {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            background: var(--color-white);
            border-radius: 20px 20px 0 0;
            padding: 20px;
            transform: translateY(110%);
            transition: transform 0.3s ease;
            z-index: 101;
            max-height: 60vh;
            overflow-y: auto;
            box-shadow: 0 -4px 20px rgba(0,0,0,0.15);
        }

        /* Producto que deriva a una tienda o página externa */
        .bs-owner-editor .bs-radio-group {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }

        .bs-external-reference-price {
            font-size: 0.92rem;
            font-weight: 600;
            color: var(--color-text-secondary, #667085);
        }

        .bs-external-product-note {
            display: grid;
            gap: 6px;
            padding: 16px;
            border: 1px solid #d8dee8;
            border-radius: 12px;
            background: #f7f9fc;
            color: #273142;
        }

        .bs-external-product-note strong {
            font-size: 0.95rem;
        }

        .bs-external-product-note span {
            font-size: 0.84rem;
            line-height: 1.45;
            color: #667085;
        }

        .bs-external-link-btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            text-decoration: none;
            text-align: center;
        }

        @media (max-width: 640px) {
            .bs-owner-editor .bs-radio-group {
                grid-template-columns: 1fr;
            }
        }
        .bottom-sheet.active {
            transform: translateY(0);
        }
        
        /* Bottom Sheet con carrusel de imágenes - ocupa casi toda la pantalla */
        .bottom-sheet.has-carousel {
            max-height: 95vh;
        }
        
        /* HANDLE */
        .bs-handle {
            width: 40px;
            height: 4px;
            background: var(--color-border-subtle);
            border-radius: 2px;
            margin: 0 auto 20px;
        }
        
        /* HEADER */
        .bs-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
        }
        
        .bs-title {
            font-size: 20px;
            font-weight: 600;
            color: var(--color-text-primary);
        }
        
        .bs-price {
            font-size: 18px;
            font-weight: 600;
            color: #007AFF;
        }
        
        .bs-description {
            font-size: 14px;
            line-height: 1.6;
            color: var(--color-text-muted);
            padding: 0 20px 12px;
            margin-top: -8px;
            white-space: pre-wrap;
            word-wrap: break-word;
        }
        
        .bs-description strong {
            font-weight: 600;
            color: var(--color-text-secondary);
        }
        
        .bs-description em {
            font-style: italic;
        }
        
        .bs-close-btn {
            background: var(--color-surface-soft);
            border: none;
            width: 32px;
            height: 32px;
            border-radius: 50%;
            cursor: pointer;
            font-size: 20px;
            color: var(--color-text-subtle);
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.2s;
        }
        
        .bs-close-btn:hover {
            background: #e5e5e7;
        }
        
        /* SECTIONS */
        .bs-section {
            margin-bottom: 24px;
        }
        
        .bs-section-title {
            font-size: 14px;
            font-weight: 600;
            color: var(--color-text-subtle);
            text-transform: uppercase;
            letter-spacing: 0.5px;
            margin-bottom: 12px;
        }
        
        /* INPUT FIELDS */
        .bs-input-group {
            margin-bottom: 16px;
        }
        
        .bs-input-label {
            display: block;
            font-size: 14px;
            font-weight: 500;
            color: var(--color-text-primary);
            margin-bottom: 8px;
        }
        
        .bs-optional-tag {
            font-weight: 400;
            font-size: 12px;
            color: var(--color-text-subtle);
            margin-left: 4px;
        }
        
        .bs-input-field {
            width: 100%;
            padding: 12px 16px;
            border: 1px solid var(--color-border-subtle);
            border-radius: 10px;
            font-size: 16px;
            transition: all 0.2s;
        }
        
        .bs-input-field:focus {
            outline: none;
            border-color: #007AFF;
            box-shadow: 0 0 0 4px rgba(0, 122, 255, 0.1);
        }
        
        /* VARIANT ITEM */
        .bs-variant-item {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 12px;
            background: var(--color-surface-soft);
            border-radius: 10px;
            margin-bottom: 8px;
        }
        
        .bs-variant-input {
            flex: 1;
            padding: 8px 12px;
            border: 1px solid var(--color-border-subtle);
            border-radius: 8px;
            font-size: 15px;
        }
        
        .bs-variant-input:focus {
            outline: none;
            border-color: #007AFF;
        }
        
        .bs-variant-remove {
            background: #FF3B30;
            color: var(--color-white);
            border: none;
            width: 32px;
            height: 32px;
            border-radius: 50%;
            cursor: pointer;
            font-size: 18px;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.2s;
            flex-shrink: 0;
        }
        
        .bs-variant-remove:hover {
            background: #d32f2f;
        }
        
        /* ADD VARIANT BUTTON */
        .bs-add-variant-btn {
            width: 100%;
            padding: 12px;
            border: 2px dashed var(--color-border-subtle);
            background: transparent;
            border-radius: 10px;
            color: #007AFF;
            font-size: 14px;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.2s;
        }
        
        .bs-add-variant-btn:hover {
            border-color: #007AFF;
            background: rgba(0, 122, 255, 0.05);
        }
        
        /* RADIO OPTIONS (Cliente) */
        .bs-variant-options {
            display: flex;
            flex-direction: column;
            gap: 12px;
        }
        
        .bs-variant-option {
            display: flex;
            align-items: center;
            padding: 16px;
            border: 2px solid var(--color-border-subtle);
            border-radius: 12px;
            cursor: pointer;
            transition: all 0.2s;
        }
        
        .bs-variant-option:hover {
            border-color: #007AFF;
            background: rgba(0, 122, 255, 0.05);
        }
        
        .bs-variant-option.selected {
            border-color: #007AFF;
            background: rgba(0, 122, 255, 0.1);
        }
        
        .bs-variant-radio {
            width: 20px;
            height: 20px;
            border: 2px solid var(--color-border-subtle);
            border-radius: 50%;
            margin-right: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.2s;
            flex-shrink: 0;
        }
        
        .bs-variant-option.selected .bs-variant-radio {
            border-color: #007AFF;
        }
        
        .bs-variant-radio::after {
            content: '';
            width: 10px;
            height: 10px;
            background: #007AFF;
            border-radius: 50%;
            opacity: 0;
            transition: all 0.2s;
        }
        
        .bs-variant-option.selected .bs-variant-radio::after {
            opacity: 1;
        }
        
        .bs-variant-label {
            font-size: 16px;
            font-weight: 500;
            color: var(--color-text-primary);
        }
        
        /* QUANTITY SELECTOR */
        .bs-quantity-section {
            margin-top: 20px;
        }
        
        .bs-quantity-selector {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 20px;
            padding: 20px;
            background: var(--color-surface-soft);
            border-radius: 12px;
        }
        
        .bs-qty-btn {
            width: 44px;
            height: 44px;
            border-radius: 50%;
            border: none;
            background: #007AFF;
            color: var(--color-white);
            cursor: pointer;
            font-size: 24px;
            font-weight: 600;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.2s;
        }
        
        .bs-qty-btn:hover {
            background: #0051D5;
        }
        
        .bs-qty-btn:active {
            transform: scale(0.95);
        }
        
        .bs-qty-btn:disabled {
            opacity: 0.3;
            cursor: not-allowed;
        }
        
        .bs-qty-value {
            min-width: 60px;
            text-align: center;
            font-size: 32px;
            font-weight: 600;
            color: var(--color-text-primary);
        }
        
        /* SUMMARY */
        .bs-summary {
            background: var(--color-surface-soft);
            padding: 16px;
            border-radius: 12px;
            margin: 20px 0;
        }
        
        .bs-summary-row {
            display: flex;
            justify-content: space-between;
            margin-bottom: 8px;
            font-size: 14px;
        }
        
        .bs-summary-row:last-child {
            margin-bottom: 0;
            font-size: 18px;
            font-weight: 600;
            padding-top: 8px;
            border-top: 1px solid var(--color-border-subtle);
        }
        
        .bs-summary-label {
            color: var(--color-text-subtle);
        }
        
        .bs-summary-value {
            color: var(--color-text-primary);
            font-weight: 500;
        }
        
        .bs-summary-total {
            color: #007AFF !important;
        }
        
        /* DISCOUNT BADGE */
        .bs-discount-badge {
            background: linear-gradient(135deg, #34C759, #30D158);
            color: var(--color-white);
            padding: 12px 16px;
            border-radius: 10px;
            text-align: center;
            margin-bottom: 16px;
            font-weight: 600;
            animation: pulse 2s ease-in-out infinite;
        }
        
        /* BUTTONS */
        .bs-actions {
            display: flex;
            gap: 12px;
            margin-top: 20px;
        }
        
        .bs-btn {
            flex: 1;
            padding: 16px;
            border: none;
            border-radius: 12px;
            font-size: 16px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.2s;
        }
        
        .bs-btn-primary {
            background: #007AFF;
            color: var(--color-white);
        }
        
        .bs-btn-primary:hover {
            background: #0051D5;
        }
        
        .bs-btn-primary:active {
            transform: scale(0.98);
        }
        
        .bs-btn-primary:disabled {
            opacity: 0.5;
            cursor: not-allowed;
        }
        
        .bs-btn-secondary {
            background: var(--color-surface-soft);
            color: var(--color-text-primary);
        }
        
        .bs-btn-secondary:hover {
            background: #e5e5e7;
        }
        
        /* HELPER TEXT */
        .bs-helper-text {
            font-size: 13px;
            color: var(--color-text-subtle);
            margin-top: 4px;
        }
        
        /* ===== CARRUSEL DE IMÁGENES (MODO CLIENTE) ===== */
        .bs-image-carousel {
            position: relative;
            width: calc(100% + 40px);
            margin: -20px -20px 16px -20px;
            overflow: hidden;
            background: var(--color-surface-soft);
            border-radius: 20px 20px 0 0;
        }
        
        .bs-carousel-close {
            position: absolute;
            top: 12px;
            right: 12px;
            z-index: 10;
            background: rgba(0, 0, 0, 0.5);
            color: var(--color-white);
            border: none;
            width: 32px;
            height: 32px;
            border-radius: 50%;
            font-size: 20px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .bs-carousel-track {
            display: flex;
            transition: transform 0.3s ease;
            touch-action: pan-y pinch-zoom;
        }
        
        .bs-carousel-slide {
            min-width: 100%;
            aspect-ratio: 1 / 1; /* Más alto para ocupar más espacio */
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
        }
         
        .bs-carousel-slide img {
            width: 100%;
            height: 92%;
            object-fit: contain; /* Mostrar imagen completa sin recortar */
            background: var(--color-surface-soft);
            margin-bottom: 20px;
        }
        
        .bs-carousel-dots {
            display: flex;
            justify-content: center;
            gap: 8px;
            padding: 5px 0;
            background: var(--color-white);
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
        }
        
        .bs-carousel-dot {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: rgba(0, 0, 0, 0.3);
            cursor: pointer;
            transition: all 0.2s;
        }
        
        .bs-carousel-dot.active {
            background: #007AFF;
            transform: scale(1.2);
        }
        
        /* Botones de navegación del carrusel (PC) */
        .bs-carousel-nav {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            background: rgba(255, 255, 255, 0.85);
            border: none;
            width: 36px;
            height: 36px;
            border-radius: 50%;
            cursor: pointer;
            display: none; /* Oculto en móvil */
            align-items: center;
            justify-content: center;
            z-index: 5;
            color: #333;
            transition: all 0.2s ease;
            opacity: 0;
            box-shadow: 0 2px 8px rgba(0,0,0,0.15);
        }
        
        .bs-carousel-prev { left: 12px; }
        .bs-carousel-next { right: 12px; }
        
        .bs-carousel-nav:hover {
            background: rgba(255, 255, 255, 1);
            transform: translateY(-50%) scale(1.05);
        }
        
        /* Mostrar botones en PC cuando hay hover en el carrusel */
        @media (min-width: 769px) {
            .bs-carousel-nav {
                display: flex;
            }
            
            .bs-image-carousel:hover .bs-carousel-nav {
                opacity: 1;
            }
        }
        
        /* Barra de progreso del autoplay */
        .bs-carousel-progress {
            position: absolute;
            bottom: 28px;
            left: 0;
            right: 0;
            height: 2px;
            background: rgba(0, 0, 0, 0.1);
            z-index: 5;
        }
        
        .bs-carousel-progress-bar {
            height: 100%;
            background: var(--accent-color, #007AFF);
            width: 0%;
            animation: carouselProgress 7s linear forwards;
        } 
          
        @keyframes carouselProgress {
            from { width: 0%; }
            to { width: 100%; }
        }
        
        .bs-header-with-carousel {
            padding-top: 0;
        }
        
        /* ===== GALERÍA DE FOTOS (MODO PROPIETARIO) ===== */
        .bs-gallery-preview {
            display: flex;
            gap: 12px;
            flex-wrap: wrap;
            margin-bottom: 12px;
        }
        
        .bs-gallery-empty {
            color: var(--color-text-subtle);
            font-size: 14px;
            font-style: italic;
            padding: 20px;
            text-align: center;
            background: var(--color-surface-soft);
            border-radius: 8px;
            width: 100%;
        }
        
        .bs-gallery-item {
            position: relative;
            width: 80px;
            height: 80px;
            border-radius: 8px;
            overflow: hidden;
            border: 2px solid #e5e5e7;
        }
        
        .bs-gallery-item img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        
        .bs-gallery-remove {
            position: absolute;
            top: 2px;
            right: 2px;
            width: 22px;
            height: 22px;
            background: rgba(239, 68, 68, 0.9);
            color: var(--color-white);
            border: none;
            border-radius: 50%;
            font-size: 14px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            line-height: 1;
        }
        
        .bs-gallery-remove:hover {
            background: var(--color-danger-strong);
        }
        
        .bs-gallery-add-btn {
            padding: 10px 16px;
            background: var(--color-surface-soft);
            border: 2px dashed var(--color-border-subtle);
            border-radius: 8px;
            font-size: 14px;
            font-weight: 500;
            color: #007AFF;
            cursor: pointer;
            transition: all 0.2s;
        }
        
        .bs-gallery-add-btn:hover {
            background: rgba(0, 122, 255, 0.05);
            border-color: #007AFF;
        }
        
        .bs-gallery-add-btn:disabled {
            opacity: 0.5;
            cursor: wait;
        }
        
        /* ===== SISTEMA SIMPLIFICADO DE VARIANTES ===== */
        
        /* RADIO GROUP */
        .bs-radio-group {
            display: flex;
            flex-direction: column;
            gap: 10px;
        }
         
        .bs-radio-option {
            display: flex;
            align-items: center;
            padding: 12px 14px;
            border: 2px solid #e8e8e8;
            border-radius: 10px;
            cursor: pointer;
            transition: all 0.2s;
            background: var(--color-white);
            gap: 10px;
        }
        
        .bs-radio-option:hover {
            border-color: #c5d8fc;
            background: #f8faff;
        }
        
        .bs-radio-option.active {
            border-color: #4A90A4;
            background: #f0f7fa;
        }
        
        .bs-radio-option input[type="radio"] {
            margin: 0;
            width: 18px;
            height: 18px;
            cursor: pointer;
            flex-shrink: 0;
            accent-color: #4A90A4;
        }
        
        .bs-radio-content {
            flex: 1;
            display: flex;
            align-items: center;
            gap: 10px;
        }
        
        .bs-radio-icon {
            font-size: 22px;
            line-height: 1;
        }
        
        .bs-radio-text {
            flex: 1;
        }
        
        .bs-radio-label {
            font-size: 14px;
            font-weight: 600;
            color: #333;
            margin: 0;
        }
        
        .bs-radio-option.active .bs-radio-label {
            color: #4A90A4;
        }
        
        .bs-radio-description {
            font-size: 12px;
            color: #888;
            line-height: 1.3;
            margin: 0;
        }
        
        /* SECCIÓN DE VARIANTES CONFIG */
        .bs-variants-config {
            opacity: 0;
            transform: translateY(-10px);
            transition: all 0.3s ease;
        }
        
        .bs-variants-config[style*="display: block"] {
            opacity: 1;
            transform: translateY(0);
        }
        
        /* ============================================
         * SISTEMA V2 DE OPCIONES (Bottom Sheet)
         * ============================================ */
        
        /* Indicador de progreso */
        .bs-option-progress {
            display: flex;
            gap: 4px;
            font-size: 12px;
        }
        
        .bs-option-progress-dot {
            color: var(--color-border-subtle);
            transition: color 0.2s;
        }
        
        .bs-option-progress-dot.active {
            color: #007AFF;
        }
        
        /* Contenedor de pasos */
        .bs-option-steps-container {
            overflow: hidden;
            border-radius: 12px;
            background: var(--color-surface-soft);
            margin-top: 12px;
        }
        
        .bs-option-steps-wrapper {
            display: flex;
            width: 300%;
            transition: transform 0.3s ease-in-out;
        }

        .bs-option-steps-wrapper.is-two-step {
            width: 200%;
        }
        
        .bs-option-step {
            width: 33.33%;
            padding: 16px;
            box-sizing: border-box;
        }

        .bs-option-steps-wrapper.is-two-step > .bs-option-step {
            width: 50%;
        }
        
        /* Intro de cada paso */
        .bs-option-intro {
            font-size: 14px;
            color: var(--color-text-primary);
            margin-bottom: 12px;
        }
        
        .bs-option-intro strong {
            color: #007AFF;
        }
        
        /* Select de tipo */
        .bs-option-type-select {
            width: 100%;
            padding: 10px 12px;
            border: 1.5px solid var(--color-border-subtle);
            border-radius: 8px;
            font-size: 14px;
            background: var(--color-white);
            color: var(--color-text-primary);
            margin-bottom: 12px;
            cursor: pointer;
        }
        
        .bs-option-type-select:focus {
            border-color: #007AFF;
            outline: none;
        }
        
        /* Input nombre personalizado */
        .bs-option-custom-name {
            margin-bottom: 12px;
        }
        
        /* Pills de opciones rápidas - Estilo modal existente */
        .bs-option-pills {
            display: flex;
            flex-wrap: wrap;
            gap: 6px;
            margin-bottom: 12px;
            min-height: 32px;
        }
        
        .bs-option-pill {
            padding: 6px 12px;
            border: 1.5px solid #5DADE2;
            border-radius: 16px;
            background: var(--color-white);
            font-size: 13px;
            color: #5DADE2;
            cursor: pointer;
            transition: all 0.15s;
        }
        
        .bs-option-pill:hover {
            border-color: #48C9B0;
            background: rgba(72, 201, 176, 0.1);
            color: #48C9B0;
        }
        
        .bs-option-pill.selected {
            border-color: #48C9B0;
            background: rgba(72, 201, 176, 0.15);
            color: #48C9B0;
        }
        
        /* Input manual - Estilo modal existente */
        .bs-option-manual-input {
            display: flex;
            gap: 8px;
            margin-bottom: 12px;
        }

        .bs-option-manual-input.bs-pending-option-highlight {
            animation: bsPendingOptionHighlight 1.15s ease both;
            border-radius: 10px;
        }

        @keyframes bsPendingOptionHighlight {
            0%, 100% { box-shadow: 0 0 0 0 rgba(245, 158, 11, 0); }
            22%, 72% { box-shadow: 0 0 0 4px rgba(245, 158, 11, .22); }
        }
        
        .bs-option-manual-input .bs-input-field {
            flex: 1;
        }
        
        .bs-option-add-btn {
            width: 36px;
            height: 36px;
            border: none;
            border-radius: 8px;
            background: #5DADE2;
            color: var(--color-white);
            font-size: 18px;
            font-weight: 600;
            cursor: pointer;
            transition: background 0.2s;
        }
        
        .bs-option-add-btn:hover {
            background: #48C9B0;
        }
        
        /* Tags de opciones - Estilo modal existente */
        .bs-option-tags {
            display: flex;
            flex-wrap: wrap;
            gap: 6px;
            min-height: 20px;
            margin-bottom: 12px;
        }
        
        .bs-option-tag {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 6px 12px;
            background: #f0f0f5;
            color: var(--color-text-primary);
            border-radius: 16px;
            font-size: 13px;
            font-weight: 500;
            border: 1px solid #e5e5e5;
        }
        
        .bs-option-tag-remove {
            background: none;
            border: none;
            color: var(--color-danger-strong);
            font-size: 16px;
            font-weight: bold;
            cursor: pointer;
            padding: 0;
            line-height: 1;
        }
        
        .bs-option-tag-remove:hover {
            color: #b91c1c;
        }
        
        /* Warning */
        .bs-option-empty-warning {
            padding: 10px 12px;
            background: #FFF3CD;
            border: 1px solid #FFD700;
            border-radius: 8px;
            color: #856404;
            font-size: 13px;
            margin-bottom: 12px;
        }
        
        /* Navegación */
        .bs-option-nav {
            display: flex;
            justify-content: space-between;
            gap: 8px;
            margin-top: 16px;
            padding-top: 12px;
            border-top: 1px solid #e5e5e5;
        }
        
        .bs-btn-back,
        .bs-btn-next,
        .bs-btn-skip {
            padding: 10px 16px;
            border-radius: 8px;
            font-size: 14px;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.2s;
        }
        
        .bs-btn-back {
            background: var(--color-surface-soft);
            border: 1px solid var(--color-border-subtle);
            color: var(--color-text-primary);
        }
        
        .bs-btn-back:hover {
            background: #e5e5e7;
        }
        
        .bs-btn-next {
            background: #007AFF;
            border: none;
            color: var(--color-white);
        }
        
        .bs-btn-next:hover {
            background: #0051D5;
        }
        
        .bs-btn-skip {
            background: transparent;
            border: 1px solid var(--color-border-subtle);
            color: var(--color-text-subtle);
        }
        
        .bs-btn-skip:hover {
            background: var(--color-surface-soft);
            color: var(--color-text-primary);
        }
        
        /* Matriz de disponibilidad */
        .bs-availability-intro {
            font-size: 11px;
            color: var(--color-text-subtle);
            margin: 0 0 10px;
            text-align: left;
        }
        
        .bs-availability-matrix {
            overflow-x: auto;
            margin-bottom: 12px;
        }
        
        .bs-availability-grid {
            display: grid;
            gap: 4px;
            min-width: min-content;
        }
        
        .bs-availability-corner {
            background: transparent;
        }
        
        .bs-availability-header-cell {
            padding: 8px 4px;
            background: #f0f0f5;
            border-radius: 6px;
            font-size: 12px;
            font-weight: 600;
            text-align: center;
            color: var(--color-text-primary);
        }
        
        .bs-availability-row-label {
            padding: 8px 12px;
            background: #f0f0f5;
            border-radius: 6px;
            font-size: 12px;
            font-weight: 600;
            color: var(--color-text-primary);
            display: flex;
            align-items: center;
        }
        
        .bs-availability-cell {
            padding: 12px 8px;
            border-radius: 6px;
            text-align: center;
            font-size: 16px;
            cursor: pointer;
            transition: all 0.15s;
        }
        
        .bs-availability-cell.available {
            background: #D4EDDA;
            color: #155724;
        }
        
        .bs-availability-cell.unavailable {
            background: #F8D7DA;
            color: #721C24;
        }
        
        .bs-availability-cell:hover {
            transform: scale(1.05);
        }
        
        /* Mensaje sin matriz */
        .bs-no-matrix-message {
            text-align: center;
            padding: 24px 16px;
        }
        
        .bs-no-matrix-icon {
            font-size: 36px;
            color: #34C759;
            margin-bottom: 8px;
        }
        
        .bs-no-matrix-text {
            font-size: 16px;
            font-weight: 600;
            color: var(--color-text-primary);
            margin-bottom: 4px;
        }
        
        .bs-no-matrix-subtext {
            font-size: 13px;
            color: var(--color-text-subtle);
        }
        
        /* Mensaje de confirmación */
        .bs-option-confirm-message {
            text-align: center;
            padding: 12px;
            background: #E8F5E9;
            border-radius: 8px;
            font-size: 13px;
            color: #2E7D32;
            margin-top: 12px;
        }
        
        /* TEMPLATES RÁPIDAS */
        .bs-templates-quick {
            display: flex;
            gap: 8px;
            margin-bottom: 16px;
            flex-wrap: wrap;
        }
        
        .bs-template-quick-btn {
            display: flex;
            align-items: center;
            gap: 6px;
            padding: 10px 16px;
            border: 1.5px solid var(--color-border-subtle);
            border-radius: 8px;
            background: var(--color-white);
            color: var(--color-text-primary);
            font-size: 14px;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.2s;
        }
        
        .bs-template-quick-btn:hover {
            border-color: #007AFF;
            background: rgba(0, 122, 255, 0.05);
            color: #007AFF;
        }
        
        .bs-template-icon {
            font-size: 16px;
        }
        
        /* TAGS DE VARIANTES */
        .bs-variants-tags {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            padding: 16px;
            background: var(--color-surface-soft);
            border-radius: 10px;
            margin-bottom: 16px;
            min-height: 60px;
        }
        
        .bs-variants-empty {
            width: 100%;
            text-align: center;
            color: var(--color-text-subtle);
            font-size: 14px;
            padding: 8px 0;
        }
        
        .bs-variant-tag {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 8px 12px;
            background: var(--color-white);
            border: 1px solid var(--color-border-subtle);
            border-radius: 8px;
            font-size: 14px;
            color: var(--color-text-primary);
            animation: tagFadeIn 0.2s ease;
        }
        
        @keyframes tagFadeIn {
            from {
                opacity: 0;
                transform: scale(0.9);
            }
            to {
                opacity: 1;
                transform: scale(1);
            }
        }
        
        .bs-variant-tag-text {
            font-weight: 500;
        }
        
        .bs-variant-tag-remove {
            background: none;
            border: none;
            color: #FF3B30;
            font-size: 18px;
            font-weight: bold;
            cursor: pointer;
            padding: 0;
            width: 20px;
            height: 20px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            transition: all 0.2s;
        }
        
        .bs-variant-tag-remove:hover {
            background: #FF3B30;
            color: var(--color-white);
        }
        
        /* INPUT PARA AGREGAR VARIANTES */
        .bs-variant-input-group {
            display: flex;
            gap: 8px;
            margin-bottom: 12px;
        }
        
        .bs-variant-input-field {
            flex: 1;
            padding: 12px 16px;
            border: 1.5px solid var(--color-border-subtle);
            border-radius: 10px;
            font-size: 15px;
            transition: all 0.2s;
        }
        
        .bs-variant-input-field:focus {
            outline: none;
            border-color: #007AFF;
            box-shadow: 0 0 0 4px rgba(0, 122, 255, 0.1);
        }
        
        .bs-variant-add-btn {
            padding: 12px 20px;
            background: #007AFF;
            color: var(--color-white);
            border: none;
            border-radius: 10px;
            font-size: 15px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.2s;
            white-space: nowrap;
        }
        
        .bs-variant-add-btn:hover {
            background: #0051D5;
            transform: translateY(-1px);
        }
        
        .bs-variant-add-btn:active {
            transform: translateY(0);
        }
        
        /* ERROR DE VALIDACIÓN */
        .bs-validation-error {
            padding: 12px 16px;
            background: #FFF3F3;
            border: 1px solid #FF3B30;
            border-radius: 8px;
            color: #FF3B30;
            font-size: 14px;
            margin-top: 12px;
        }
        
        /* ===== SISTEMA DE CÓDIGOS DE PRODUCTO ===== */
        
        /* Info icon */
        .bs-info-icon {
            display: inline-block;
            margin-left: 6px;
            font-size: 14px;
            cursor: help;
            opacity: 0.7;
            transition: opacity 0.2s;
        }
        
        .bs-info-icon:hover {
            opacity: 1;
        }
        
        /* Code input wrapper */
        .bs-code-input-wrapper {
            position: relative;
            display: flex;
            align-items: center;
            gap: 8px;
        }
        
        .bs-code-input {
            flex: 1;
            text-transform: uppercase;
            font-weight: 600;
            letter-spacing: 0.5px;
        }
        
        /* Code status indicator */
        .bs-code-status {
            font-size: 18px;
            min-width: 24px;
            text-align: center;
        }
        
        .bs-code-status.success {
            color: var(--color-success);
        }
        
        .bs-code-status.error {
            color: #FF3B30;
        }
        
        .bs-code-status.checking {
            color: #007AFF;
            animation: pulse 1.5s infinite;
        }
        
        @keyframes pulse {
            0%, 100% { opacity: 1; }
            50% { opacity: 0.5; }
        }
        
        /* Code error message */
        .bs-code-error {
            color: #FF3B30;
            font-size: 13px;
            margin-top: 6px;
            padding: 8px 12px;
            background: #FFF3F3;
            border-radius: 6px;
            border-left: 3px solid #FF3B30;
        }
        
        /* ===== CÓDIGO INLINE EN LISTA DE GESTIÓN ===== */
        /* Nota: Los estilos principales de .product-item están arriba (diseño 2 filas) */
        
        .product-info {
            display: flex;
            justify-content: space-between;
            align-items: center;
            width: 100%;
        }
        
        .product-code-inline {
            display: flex;
            align-items: center;
            gap: 6px;
            flex: 1;
            min-width: 0;
        }
        
        .code-label {
            font-size: 14px;
            color: #9ca3af;
        }
        
        .code-input-inline {
            width: 90px;
            padding: 6px 10px;
            border: 1.5px solid var(--color-border-subtle);
            border-radius: 6px;
            font-size: 13px;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            text-align: center;
            transition: all 0.2s;
        }
        
        .code-input-inline:focus {
            outline: none;
            border-color: #007AFF;
            box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.1);
        }
        
        .code-input-inline.error {
            border-color: #FF3B30;
        }
        
        .code-input-inline.success {
            border-color: var(--color-success);
        }
        
        .code-status-inline {
            font-size: 14px;
            min-width: 20px;
        }
        
        /* VARIANTES EN GRID DE CARDS */
        .bs-variants-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
            gap: 12px;
            margin-top: 8px;
        }
        
        .bs-variant-card {
            background: var(--color-surface-soft);
            border-radius: 12px;
            padding: 14px 10px;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 12px;
            transition: all 0.2s ease;
            border: 2px solid transparent;
        }
        
        .bs-variant-card.has-quantity {
            background: var(--color-success-soft);
            border: 2px solid var(--accent-color);
            transform: scale(1.02);
        }
        
        .bs-variant-card-name {
            font-size: 15px;
            font-weight: 600;
            color: var(--color-text-primary);
            text-align: center;
        }
        
        .bs-variant-card-qty {
            display: flex;
            align-items: center;
            gap: 8px;
        }
        
        .bs-card-qty-btn {
            width: 28px;
            height: 28px;
            border-radius: 6px;
            background: var(--accent-color, #007AFF);
            color: var(--color-white);
            border: none;
            font-size: 18px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.2s;
        }
        
        .bs-card-qty-btn:hover {
            filter: brightness(0.85);
        }
        
        .bs-card-qty-btn:active {
            transform: scale(0.95);
        }
        
        .bs-card-qty-value {
            min-width: 24px;
            text-align: center;
            font-size: 16px;
            font-weight: 600;
            color: var(--color-text-primary);
        }
         
        /* ═══════════════════════════════════════════════════════════════
           VARIANTES AGRUPADAS (V2 con dos dimensiones)
           ═══════════════════════════════════════════════════════════════ */
        .bs-variants-grouped {
            display: flex;
            flex-direction: column;
            gap: 16px;
        }
        
        .bs-variant-group {
            background: #f8f9fa;
            border-radius: 12px;
            padding: 12px;
            border: 1px solid #e9ecef;
        }
        
        .bs-variant-group-title {
            font-size: 16px;
            font-weight: 700;
            color: var(--color-text-primary);
            margin-bottom: 10px;
            padding-left: 4px;
        }
        
        .bs-variant-group-options {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
        }
        
        .bs-variant-option {
            display: flex;
            align-items: center;
            gap: 6px;
            background: var(--color-white);
            border-radius: 8px;
            padding: 6px 8px;
            border: 1px solid var(--color-border-alt);
            transition: all 0.2s;
        }
        
        .bs-variant-option.has-quantity {
            background: var(--color-success-soft);
            border-color: var(--accent-color);
        }
        
        .bs-option-label {
            font-size: 13px;
            font-weight: 600;
            color: #495057;
            min-width: 28px;
            text-align: center;
        }
        
        .bs-option-qty {
            display: flex;
            align-items: center;
            gap: 4px;
        }
        
        .bs-option-qty-btn {
            width: 35px;
            height: 35px;
            border-radius: 6px;
            background: var(--accent-color, #007AFF);
            color: var(--color-white);
            border: none;
            font-size: 16px;
            font-weight: 500;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.15s;
        }
        
        .bs-option-qty-btn:hover {
            filter: brightness(0.85);
        }
        
        .bs-option-qty-btn:active {
            transform: scale(0.92);
        }
        
        .bs-option-qty-value {
            min-width: 20px;
            text-align: center;
            font-size: 14px;
            font-weight: 700;
            color: var(--color-text-primary);
        }
        
        /* Responsive para variantes agrupadas */
        @media (max-width: 400px) {
            .bs-variant-group {
                padding: 10px;
            }
            
            .bs-variant-group-title {
                font-size: 15px;
            }
            
            .bs-variant-option {
                padding: 5px 6px;
            }
            
            .bs-option-label {
                font-size: 12px;
                min-width: 24px;
            }
            
            .bs-option-qty-btn {
                width: 22px;
                height: 22px;
                font-size: 14px;
            }
            
            .bs-option-qty-value {
                font-size: 13px;
                min-width: 18px;
            }
        }
        
        .bs-variant-info {
            display: flex;
            flex-direction: column;
            gap: 4px;
        }
        
        .bs-variant-name {
            font-size: 16px;
            font-weight: 500;
            color: var(--color-text-primary);
        }
        
        .bs-variant-price {
            font-size: 14px;
            font-weight: 600;
            color: #007AFF;
        }
        
        .bs-quantity-selector-inline {
            display: flex;
            align-items: center;
            gap: 12px;
        }
        
        .bs-quantity-selector-inline .bs-qty-btn {
            width: 36px;
            height: 36px;
            border-radius: 8px;
            background: #007AFF;
            color: var(--color-white);
            border: none;
            font-size: 20px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.2s;
        }
        
        .bs-quantity-selector-inline .bs-qty-btn:hover {
            background: #0051D5;
        }
        
        .bs-quantity-selector-inline .bs-qty-btn:active {
            transform: scale(0.95);
        }
        
        .bs-quantity-selector-inline .bs-qty-value {
            min-width: 30px;
            text-align: center;
            font-size: 16px;
            font-weight: 600;
            color: var(--color-text-primary);
        }
        
        /* RESUMEN DEL CARRITO */
        .bs-cart-summary {
            margin-top: 20px;
            opacity: 0;
            transform: translateY(-10px);
            transition: all 0.3s ease;
        }
        
        .bs-cart-summary.show {
            opacity: 1;
            transform: translateY(0);
        }
        
        /* RESUMEN COMPACTO */
        .bs-cart-summary-compact {
            margin-top: 16px;
            padding: 12px 16px;
            background: linear-gradient(135deg, var(--color-surface-soft) 0%, var(--color-surface-soft-2) 100%);
            border-radius: 12px;
            opacity: 0;
            transform: translateY(-5px);
            transition: all 0.3s ease;
        }
        
        .bs-cart-summary-compact.show {
            opacity: 1;
            transform: translateY(0);
        }

        /* Un resumen vacío no debe conservar fondo, margen ni altura. */
        body:is(.theme-default, .theme-negro, .theme-matrix) .bottom-sheet.client-mode .bs-cart-summary-compact:not(.show) {
            display: none;
        }
        
        .bs-summary-compact-content {
            display: flex;
            flex-direction: column;
            gap: 6px;
            align-items: center;
        }

        .bs-draft-selection-list {
            display: grid;
            width: 100%;
            color: var(--color-text-primary);
        }

        .bs-draft-selection-title {
            padding-bottom: 7px;
            border-bottom: 1px solid var(--color-border-subtle);
            font-size: 12px;
            font-weight: 700;
            text-align: left;
        }

        .bs-draft-selection-row,
        .bs-draft-selection-total {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 16px;
            min-width: 0;
        }

        .bs-draft-selection-row {
            min-height: 32px;
            padding: 6px 0;
            border-bottom: 1px solid var(--color-border-subtle);
            font-size: 13px;
            line-height: 1.35;
        }

        .bs-draft-selection-label {
            min-width: 0;
            text-align: left;
            overflow-wrap: anywhere;
        }

        .bs-draft-selection-quantity {
            flex: 0 0 auto;
            color: var(--color-text-primary);
            font-size: 12px;
            font-weight: 650;
            white-space: nowrap;
        }

        .bs-draft-selection-actions {
            display: inline-flex;
            flex: 0 0 auto;
            align-items: center;
            justify-content: flex-end;
            gap: 10px;
        }

        .bs-draft-selection-remove {
            padding: 3px 0;
            border: 0;
            background: transparent;
            color: var(--color-danger, #ef4444);
            font: inherit;
            font-size: 12px;
            font-weight: 650;
            cursor: pointer;
        }

        .bs-draft-selection-remove:hover {
            text-decoration: underline;
        }

        .bs-draft-selection-total {
            padding-top: 10px;
            color: var(--color-text-muted);
            font-size: 13px;
        }

        .bs-draft-selection-total strong {
            color: var(--color-text-primary);
            font-size: 13px;
            text-align: right;
        }

        .bs-added-selection-summary {
            width: 100%;
            color: var(--color-text-muted);
            font-size: 13px;
            line-height: 1.4;
            text-align: center;
        }

        .bs-added-selection-summary strong {
            color: var(--color-text-primary);
            font-weight: 700;
        }

        @media (max-width: 380px) {
            .bs-draft-selection-row {
                align-items: flex-start;
                gap: 10px;
            }

            .bs-draft-selection-actions {
                flex-direction: column;
                align-items: flex-end;
                gap: 1px;
            }
        }
        
        .bs-summary-line {
            font-size: 14px;
            color: var(--color-text-muted);
            text-align: center;
        }
        
        .bs-summary-line.bs-summary-highlight {
            font-size: 16px;
            font-weight: 600;
            color: var(--color-text-primary);
        }
        
        .bs-summary-line.bs-summary-next {
            font-size: 13px;
            color: #007AFF;
            font-weight: 500;
        }
        
        .bs-summary-divider {
            height: 1px;
            background: linear-gradient(90deg, transparent, var(--color-border-subtle) 20%, var(--color-border-subtle) 80%, transparent);
            margin: 20px 0 16px 0;
        }
        
        .bs-summary-content {
            display: flex;
            flex-direction: column;
            gap: 12px;
        }
        
        .bs-summary-row {
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 15px;
            color: var(--color-text-primary);
        }
        
        .bs-summary-value {
            font-weight: 600;
        }
        
        .bs-summary-discount {
            color: var(--accent-color);
        }
        
        .bs-summary-discount .bs-summary-value {
            color: var(--accent-color);
        }
        
        .bs-summary-total {
            font-size: 18px;
            font-weight: 700;
            color: #007AFF;
            padding-top: 8px;
            border-top: 1px solid var(--color-surface-soft);
        }
        
        .bs-summary-total .bs-summary-value {
            color: #007AFF;
        }
        
        .bs-summary-next-discount {
            background: linear-gradient(135deg, rgba(0, 122, 255, 0.1), rgba(0, 122, 255, 0.05));
            border-left: 3px solid #007AFF;
            padding: 12px;
            border-radius: 8px;
            font-size: 14px;
            color: #007AFF;
            font-weight: 500;
            margin-top: 8px;
        }
        
        .bs-info-box {
            background: rgba(0, 122, 255, 0.1);
            border-left: 3px solid #007AFF;
            padding: 12px;
            border-radius: 8px;
            font-size: 14px;
            color: var(--color-text-primary);
            margin-top: 12px;
        }
        
        /* TEMPLATES RÁPIDOS */
        .bs-templates-section {
            margin-top: 12px;
            padding: 12px;
            background: var(--color-surface-soft);
            border-radius: 10px;
        }
        
        .bs-templates-title {
            font-size: 13px;
            font-weight: 600;
            color: var(--color-text-subtle);
            margin-bottom: 8px;
        }
        
        .bs-templates-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 8px;
        }
        
        .bs-template-btn {
            padding: 10px 8px;
            border: 1px solid var(--color-border-subtle);
            background: var(--color-white);
            border-radius: 8px;
            font-size: 13px;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.2s;
            text-align: center;
        }
        
        .bs-template-btn:hover {
            border-color: #007AFF;
            background: rgba(0, 122, 255, 0.05);
        }
        
        .bs-template-btn:active {
            transform: scale(0.98);
        }
        
        /* CHECKBOX PRODUCTO ÚNICO */
        .bs-checkbox-group {
            display: flex;
            align-items: center;
            padding: 16px;
            background: var(--color-surface-soft);
            border-radius: 10px;
            cursor: pointer;
            margin-bottom: 16px;
            transition: all 0.2s;
        }
        
        .bs-checkbox-group:hover {
            background: #e5e5e7;
        }
        
        .bs-checkbox-group input[type="checkbox"] {
            width: 20px;
            height: 20px;
            margin-right: 12px;
            cursor: pointer;
        }
        
        .bs-checkbox-label {
            flex: 1;
        }
        
        .bs-checkbox-title {
            font-size: 15px;
            font-weight: 600;
            color: var(--color-text-primary);
            margin-bottom: 2px;
        }
        
        .bs-checkbox-description {
            font-size: 13px;
            color: var(--color-text-subtle);
        }
        
        /* MENSAJE SIN VARIANTES */
        .bs-no-variants-message {
            padding: 16px;
            background: rgba(52, 199, 89, 0.1);
            border: 1px solid #34C759;
            border-radius: 10px;
            margin-bottom: 12px;
        }
        
        .bs-no-variants-title {
            font-size: 15px;
            font-weight: 600;
            color: var(--color-text-primary);
            margin-bottom: 8px;
            display: flex;
            align-items: center;
            gap: 6px;
        }
        
        .bs-no-variants-list {
            font-size: 13px;
            color: var(--color-text-subtle);
            margin-left: 28px;
        }
        
        .bs-no-variants-list li {
            margin-bottom: 4px;
        }
        
        /* VALIDACIÓN DUPLICADOS */
        .bs-variant-item.duplicate {
            background: rgba(255, 59, 48, 0.1);
            border: 1px solid #FF3B30;
        }
        
        .bs-duplicate-warning {
            color: #FF3B30;
            font-size: 12px;
            margin-top: 4px;
            font-weight: 500;
        }
        
        .bs-validation-error {
            background: rgba(255, 59, 48, 0.1);
            border-left: 3px solid #FF3B30;
            padding: 12px;
            border-radius: 8px;
            margin-bottom: 16px;
            color: #FF3B30;
            font-size: 14px;
            font-weight: 500;
        }
        #pm-gallery-upload {
  margin-bottom: 20px;
} 
        /* RESPONSIVE */
        @media (min-width: 768px) {
            .bottom-sheet {
                left: 50%;
                transform: translateX(-50%) translateY(140%);
                max-width: 500px;
                border-radius: 20px;
                bottom: 20px;
            }
            
            .bottom-sheet.active {
                transform: translateX(-50%) translateY(14px);
            }
        }
        
        /* Responsive para móviles - Cards más compactas */
        @media (max-width: 767px) {
            .bs-variants-grid {
                grid-template-columns: repeat(auto-fill, minmax(75px, 1fr));
                gap: 10px;
            }
            
            .bs-variant-card {
                padding: 12px 8px;
                gap: 10px;
            }
            
            .bs-variant-card-name {
                font-size: 14px;
            }
            
            .bs-card-qty-btn {
                width: 26px;
                height: 26px;
                font-size: 16px;
            }
            
            .bs-card-qty-value {
                font-size: 15px;
                min-width: 20px;
            }
        }

        /* Historial breve: permite sumar otra opción sin cerrar la ficha. */
        .bs-added-history {
            display: grid;
            gap: 7px;
            margin: 12px 20px 20px;
            padding: 12px 14px;
            border: 1px solid var(--color-border-muted, #e5e7eb);
            border-radius: 10px;
            background: var(--color-surface-muted, #f9fafb);
            color: var(--color-text-primary, #1d1d1f);
        }

        .bs-added-history[hidden] {
            display: none !important;
        }

        html body #bottomSheet .bs-btn.bs-btn-primary.is-added {
            border-color: #34c759 !important;
            background: #34c759 !important;
            color: #fff !important;
            opacity: 1 !important;
            pointer-events: none;
        }

        .bs-added-history-title {
            font-size: 12px;
            font-weight: 700;
        }

        .bs-added-history-item {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
            font-size: 12px;
            line-height: 1.35;
        }

        .bs-added-history-item span {
            min-width: 0;
            overflow-wrap: anywhere;
        }

        .bs-added-history-item button {
            flex: 0 0 auto;
            padding: 2px 0;
            border: 0;
            background: transparent;
            color: var(--color-danger, #ef4444);
            font: inherit;
            font-weight: 600;
            cursor: pointer;
        }

        @media (max-width: 480px) {
            .bs-added-history {
                margin-right: 16px;
                margin-left: 16px;
            }
        }

        /* Opciones visuales, disponibilidad simple y packs (contrato compartido). */
        .bs-options-guidance {
            margin: 8px 0 14px;
        }

        .bs-option-remove-choice {
            margin-top: 8px;
            padding: 4px 0;
            border: 0;
            background: transparent;
            color: var(--color-text-subtle);
            font-size: 12px;
            text-decoration: underline;
            cursor: pointer;
        }

        .bs-options-subpanel {
            display: grid;
            gap: 12px;
            margin-top: 14px;
            padding: 14px;
            border: 1px solid var(--color-border-subtle);
            border-radius: 12px;
            background: var(--color-surface-soft);
            color: var(--color-text-primary);
        }

        .bs-options-subpanel.is-muted {
            color: var(--color-text-subtle);
        }

        .bs-options-subpanel.is-muted strong,
        .bs-options-subpanel.is-muted span,
        .bs-options-subpanel-heading strong,
        .bs-options-subpanel-heading span {
            display: block;
        }

        .bs-client-visual-selector {
            margin: 4px 0 16px;
            padding: 12px 0 2px;
        }

        .bs-client-visual-heading {
            margin-bottom: 8px;
            color: var(--color-text-secondary);
            font-size: 12px;
            font-weight: 700;
        }

        .bs-client-visual-unavailable {
            margin: 8px 0 16px;
            padding: 10px 12px;
            border: 1px solid var(--color-border);
            border-radius: 10px;
            color: var(--color-text-secondary);
            font-size: 13px;
            line-height: 1.4;
        }

        .bs-client-visual-values {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
        }

        .bs-client-visual-value {
            display: inline-flex;
            align-items: center;
            gap: 7px;
            min-height: 38px;
            padding: 7px 12px;
            border: 1px solid var(--color-border-subtle);
            border-radius: 999px;
            background: var(--color-white);
            color: var(--color-text-primary);
            font: inherit;
            font-size: 13px;
            cursor: pointer;
        }

        .bs-client-visual-value.selected {
            position: relative;
            z-index: 2;
            border-color: var(--accent-color);
            box-shadow: inset 0 0 0 1px var(--accent-color);
        }

        .bs-client-visual-swatch {
            width: 18px;
            height: 18px;
            flex: 0 0 18px;
            border: 1px solid rgba(15, 23, 42, .22);
            border-radius: 50%;
            background: var(--visual-color);
        }

        /* Una sola eleccion: se elige el valor y se modifica solamente su
           cantidad. Las cantidades de los demas valores quedan en memoria. */
        body:is(.theme-default, .theme-negro, .theme-matrix) .bottom-sheet.client-mode .bs-client-single-selector {
            display: grid;
            gap: 12px;
            margin-top: 14px;
        }

        body:is(.theme-default, .theme-negro, .theme-matrix) .bottom-sheet.client-mode .bs-client-single-heading {
            color: var(--color-text-secondary);
            font-size: 12px;
            font-weight: 700;
            line-height: 1.25;
        }

        body:is(.theme-default, .theme-negro, .theme-matrix) .bottom-sheet.client-mode .bs-client-single-values {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            isolation: isolate;
        }

        body:is(.theme-default, .theme-negro, .theme-matrix) .bottom-sheet.client-mode .bs-client-single-value {
            display: inline-flex;
            min-height: 38px;
            align-items: center;
            gap: 7px;
            padding: 7px 12px;
            border: 1px solid var(--color-border-subtle);
            border-radius: 10px;
            background: var(--color-white);
            color: var(--color-text-primary);
            box-shadow: none;
            font: inherit;
            font-size: 13px;
            font-weight: 600;
            line-height: 1.2;
            cursor: pointer;
            transition: border-color .16s ease, background-color .16s ease, color .16s ease;
        }

        body:is(.theme-default, .theme-negro, .theme-matrix) .bottom-sheet.client-mode .bs-client-single-value:hover {
            border-color: var(--accent-color);
        }

        body:is(.theme-default, .theme-negro, .theme-matrix) .bottom-sheet.client-mode .bs-client-single-value.selected {
            position: relative;
            z-index: 2;
            border-color: var(--accent-color);
            background: var(--color-success-soft);
            color: var(--color-text-primary);
            box-shadow: inset 0 0 0 1px var(--accent-color);
        }

        body:is(.theme-default, .theme-negro, .theme-matrix) .bottom-sheet.client-mode .bs-client-single-value.selected .bs-client-visual-count {
            background: var(--color-surface-soft);
            color: var(--accent-color);
        }

        body:is(.theme-default, .theme-negro, .theme-matrix) .bottom-sheet.client-mode .bs-client-single-quantity-wrap {
            width: min(100%, 270px);
        }

        body:is(.theme-default, .theme-negro, .theme-matrix) .bottom-sheet.client-mode .bs-client-single-quantity {
            width: 100%;
            min-height: 50px;
            justify-content: space-between;
            margin: 0;
            padding: 7px 8px 7px 12px;
            background: var(--color-surface-soft);
            border-color: var(--color-border-subtle);
            border-radius: 10px;
        }

        body:is(.theme-default, .theme-negro, .theme-matrix) .bottom-sheet.client-mode .bs-client-single-quantity.has-quantity {
            border-color: var(--accent-color);
            background: var(--color-success-soft);
        }

        body:is(.theme-default, .theme-negro, .theme-matrix) .bottom-sheet.client-mode .bs-client-single-quantity .bs-option-label {
            min-width: 0;
            color: var(--color-text-primary);
            text-align: left;
        }

        /* Selector del cliente: una sola estructura para Default, Negro y Matrix. */
        body:is(.theme-default, .theme-negro, .theme-matrix) .bottom-sheet.client-mode {
            display: flex;
            flex-direction: column;
            height: 86vh;
            max-height: 86vh;
            height: min(86dvh, 800px);
            max-height: min(86dvh, 800px);
            overflow: hidden;
        }

        body:is(.theme-default, .theme-negro, .theme-matrix) .bottom-sheet.client-mode.client-mode-compact {
            height: auto;
            max-height: min(86dvh, 800px);
        }

        body:is(.theme-default, .theme-negro, .theme-matrix) .bottom-sheet.client-mode > .bs-handle,
        body:is(.theme-default, .theme-negro, .theme-matrix) .bottom-sheet.client-mode > .bs-client-dock {
            flex: 0 0 auto;
        }

        body:is(.theme-default, .theme-negro, .theme-matrix) .bottom-sheet.client-mode > #bsContent {
            flex: 1 1 auto;
            min-height: 0;
            overflow-y: auto;
            overscroll-behavior: contain;
        }

        body:is(.theme-default, .theme-negro, .theme-matrix) .bottom-sheet.client-mode > .bs-client-shell-close {
            position: absolute;
            top: 12px;
            right: 12px;
            z-index: 45;
            width: 30px;
            height: 30px;
            border: 0;
            background: var(--color-surface-soft);
            color: var(--color-text-secondary);
            box-shadow: none;
            font-size: 17px;
            line-height: 1;
        }

        body:is(.theme-default, .theme-negro, .theme-matrix) .bottom-sheet.client-mode > .bs-client-shell-close:hover {
            background: var(--color-surface-soft-2, #e5e7eb);
            color: var(--color-text-primary);
        }

        body:is(.theme-default, .theme-negro, .theme-matrix) .bottom-sheet.client-mode .bs-client-media-slot {
            display: flow-root;
            overflow: hidden;
        }

        body:is(.theme-default, .theme-negro, .theme-matrix) .bottom-sheet.client-mode .bs-client-media-slot.is-transitioning {
            transition: height .32s cubic-bezier(.4, 0, .2, 1);
        }

        body:is(.theme-default, .theme-negro, .theme-matrix) .bottom-sheet.client-mode .bs-client-media-slot .bs-image-carousel {
            transition: opacity .24s ease;
        }

        /* La foto conserva un alto estable y ocupa cerca de un 30% menos que
           el antiguo carrusel cuadrado, sin recortarse. */
        body:is(.theme-default, .theme-negro, .theme-matrix) .bottom-sheet.client-mode .bs-carousel-slide {
            height: min(70vw, 40dvh, 320px);
            min-height: 220px;
            aspect-ratio: auto;
        }

        body:is(.theme-default, .theme-negro, .theme-matrix) .bottom-sheet.client-mode .bs-carousel-image-frame {
            position: relative;
            display: flex;
            width: 100%;
            height: 100%;
            align-items: center;
            justify-content: center;
            padding: 0;
            border: 0;
            background: transparent;
            color: inherit;
        }

        body:is(.theme-default, .theme-negro, .theme-matrix) .bottom-sheet.client-mode .bs-carousel-slide img {
            width: 100%;
            height: 100%;
            margin: 0;
            object-fit: contain;
        }

        /* Una combinacion por fila: facilita recorrer talles o numeros y evita
           anchos distintos cuando la cantidad de opciones es impar. */
        body:is(.theme-default, .theme-negro, .theme-matrix) .bottom-sheet.client-mode .bs-variant-group-options {
            display: grid;
            grid-template-columns: minmax(0, 1fr);
        }

        body:is(.theme-default, .theme-negro, .theme-matrix) .bottom-sheet.client-mode .bs-variant-group-options > .bs-variant-option {
            width: 100%;
            min-width: 0;
            justify-content: space-between;
        }

        @media (max-height: 620px) {
            body:is(.theme-default, .theme-negro, .theme-matrix) .bottom-sheet.client-mode .bs-carousel-slide {
                min-height: 180px;
            }
        }

        body:is(.theme-default, .theme-negro, .theme-matrix) .bottom-sheet.client-mode .bs-client-visual-count {
            display: inline-flex;
            min-width: 20px;
            height: 20px;
            align-items: center;
            justify-content: center;
            margin-left: 1px;
            padding: 0 6px;
            border-radius: 999px;
            background: var(--color-surface-soft);
            color: var(--color-text-secondary);
            font-size: 11px;
            font-weight: 700;
            line-height: 1;
        }

        body:is(.theme-default, .theme-negro, .theme-matrix) .bottom-sheet.client-mode .bs-client-visual-value.selected .bs-client-visual-count {
            background: var(--color-surface-soft);
            color: var(--accent-color);
        }

        body:is(.theme-default, .theme-negro, .theme-matrix) .bottom-sheet.client-mode #bsVariantsTotalInfo {
            display: none;
        }

        body:is(.theme-default, .theme-negro, .theme-matrix) .bottom-sheet.client-mode .bs-client-dock {
            position: relative;
            z-index: 25;
            margin: 12px -20px -20px;
            padding: 12px 20px calc(20px + env(safe-area-inset-bottom, 0px));
            border-top: 1px solid var(--color-border-subtle);
            background: var(--bs-client-dock-bg, var(--color-white));
            box-shadow: var(--bs-client-dock-shadow, 0 -8px 18px rgba(15, 23, 42, .06));
        }

        body:is(.theme-default, .theme-negro, .theme-matrix) .bottom-sheet.client-mode .bs-client-dock .bs-cart-summary-compact {
            margin-top: 0;
        }

        body:is(.theme-default, .theme-negro, .theme-matrix) .bottom-sheet.client-mode .bs-client-dock .bs-actions {
            margin-top: 12px;
        }

        body:is(.theme-default, .theme-negro, .theme-matrix) .bottom-sheet.client-mode .bs-client-dock .bs-cart-summary-compact:not(.show) + .bs-actions {
            margin-top: 0;
        }

        body:is(.theme-default, .theme-negro, .theme-matrix) .bottom-sheet.client-mode .bs-cart-summary-compact.show {
            transform-origin: bottom center;
            animation: bsClientSummaryEnter .24s cubic-bezier(.2, .75, .25, 1) both;
        }

        @keyframes bsClientSummaryEnter {
            from {
                opacity: 0;
                transform: translateY(7px) scale(.985);
            }
            to {
                opacity: 1;
                transform: translateY(0) scale(1);
            }
        }

        body:is(.theme-default, .theme-negro, .theme-matrix) .bottom-sheet.client-mode .bs-default-client-summary,
        body:is(.theme-default, .theme-negro, .theme-matrix) .bottom-sheet.client-mode .bs-client-summary-detail {
            width: 100%;
        }

        body:is(.theme-default, .theme-negro, .theme-matrix) .bottom-sheet.client-mode .bs-default-client-summary-toggle {
            display: flex;
            width: 100%;
            min-height: 32px;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
            padding: 0;
            border: 0;
            background: transparent;
            color: var(--color-text-primary);
            font: inherit;
            cursor: pointer;
        }

        body:is(.theme-default, .theme-negro, .theme-matrix) .bottom-sheet.client-mode .bs-default-client-summary-total {
            display: flex;
            min-width: 0;
            align-items: baseline;
            gap: 5px;
            text-align: left;
        }

        body:is(.theme-default, .theme-negro, .theme-matrix) .bottom-sheet.client-mode .bs-default-client-summary-total strong {
            font-size: 13px;
            font-weight: 700;
        }

        body:is(.theme-default, .theme-negro, .theme-matrix) .bottom-sheet.client-mode .bs-default-client-summary-total span {
            color: var(--color-text-secondary);
            font-size: 13px;
            white-space: nowrap;
        }

        body:is(.theme-default, .theme-negro, .theme-matrix) .bottom-sheet.client-mode .bs-default-client-summary-action {
            display: inline-flex;
            flex: 0 0 auto;
            align-items: center;
            gap: 5px;
            color: var(--color-text-secondary);
            font-size: 12px;
            font-weight: 600;
        }

        body:is(.theme-default, .theme-negro, .theme-matrix) .bottom-sheet.client-mode .bs-default-client-summary-action svg {
            width: 16px;
            height: 16px;
            fill: none;
            stroke: currentColor;
            stroke-linecap: round;
            stroke-linejoin: round;
            stroke-width: 2;
            transition: transform .2s ease;
        }

        body:is(.theme-default, .theme-negro, .theme-matrix) .bottom-sheet.client-mode .bs-default-client-summary.is-expanded .bs-default-client-summary-action svg {
            transform: rotate(180deg);
        }

        body:is(.theme-default, .theme-negro, .theme-matrix) .bottom-sheet.client-mode .bs-client-summary-detail {
            display: grid;
            gap: 10px;
            margin-top: 10px;
            padding-top: 10px;
            border-top: 1px solid var(--color-border-subtle);
        }

        body:is(.theme-default, .theme-negro, .theme-matrix) .bottom-sheet.client-mode .bs-client-summary-group {
            display: grid;
            gap: 2px;
        }

        body:is(.theme-default, .theme-negro, .theme-matrix) .bottom-sheet.client-mode .bs-client-summary-group-title {
            display: flex;
            align-items: center;
            gap: 6px;
            margin: 2px 0 3px;
            color: var(--color-text-secondary);
            font-size: 11px;
            font-weight: 700;
            letter-spacing: .02em;
        }

        body:is(.theme-default, .theme-negro, .theme-matrix) .bottom-sheet.client-mode .bs-client-summary-detail-row {
            display: flex;
            min-height: 28px;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
            color: var(--color-text-primary);
            font-size: 12px;
        }

        body:is(.theme-default, .theme-negro, .theme-matrix) .bottom-sheet.client-mode .bs-client-summary-detail-label {
            min-width: 0;
            text-align: left;
            overflow-wrap: anywhere;
        }

        body:is(.theme-default, .theme-negro, .theme-matrix) .bottom-sheet.client-mode .bs-client-summary-detail-actions {
            display: inline-flex;
            flex: 0 0 auto;
            align-items: center;
            gap: 10px;
        }

        body:is(.theme-default, .theme-negro, .theme-matrix) .bottom-sheet.client-mode .bs-client-summary-detail-actions strong {
            font-size: 12px;
            white-space: nowrap;
        }

        body:is(.theme-default, .theme-negro, .theme-matrix) .bottom-sheet.client-mode .bs-client-summary-detail-actions button {
            padding: 3px 0;
            border: 0;
            background: transparent;
            color: var(--color-danger, #ef4444);
            font: inherit;
            font-size: 12px;
            font-weight: 650;
            cursor: pointer;
        }

        @media (max-width: 380px) {
            body:is(.theme-default, .theme-negro, .theme-matrix) .bottom-sheet.client-mode .bs-default-client-summary-total {
                flex-direction: column;
                gap: 1px;
            }

            body:is(.theme-default, .theme-negro, .theme-matrix) .bottom-sheet.client-mode .bs-default-client-summary-action {
                font-size: 11px;
            }
        }

        .bs-options-subpanel-heading span,
        .bs-options-subpanel.is-muted span,
        .bs-pack-toggle small {
            margin-top: 3px;
            color: var(--color-text-subtle);
            font-size: 12px;
            font-weight: 400;
        }

        .bs-visual-options-list,
        .bs-pack-values,
        .bs-single-availability-list {
            display: grid;
            gap: 9px;
        }

        .bs-visual-option-row {
            display: grid;
            grid-template-columns: minmax(90px, 0.8fr) minmax(150px, 1.2fr) 42px;
            gap: 8px;
            align-items: center;
        }

        .bs-visual-option-row > strong {
            min-width: 0;
            overflow-wrap: anywhere;
        }

        .bs-visual-option-row .bs-option-type-select {
            margin: 0;
        }

        .bs-custom-color-input {
            width: 42px;
            height: 42px;
            padding: 3px;
            border: 1px solid var(--color-border-subtle);
            border-radius: 8px;
            background: var(--color-white);
        }

        .bs-pack-toggle {
            display: flex;
            gap: 10px;
            align-items: flex-start;
            cursor: pointer;
        }

        .bs-pack-toggle input {
            width: 18px;
            height: 18px;
            margin-top: 1px;
            accent-color: var(--accent-color);
        }

        .bs-pack-toggle span,
        .bs-pack-toggle strong,
        .bs-pack-toggle small,
        .bs-pack-value span {
            display: block;
        }

        .bs-pack-values {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }

        .bs-pack-value {
            padding: 10px;
            border: 1px solid var(--color-border-subtle);
            border-radius: 9px;
            background: var(--color-white);
        }

        .bs-pack-value span {
            margin-bottom: 6px;
            color: var(--color-text-primary);
            font-size: 12px;
            font-weight: 700;
            overflow-wrap: anywhere;
        }

        .bs-pack-value input {
            width: 100%;
            min-height: 38px;
            padding: 7px 9px;
            border: 1px solid var(--color-border-subtle);
            border-radius: 7px;
            background: var(--color-white);
            color: var(--color-text-primary);
        }

        .bs-single-availability {
            display: flex;
            justify-content: space-between;
            gap: 12px;
            width: 100%;
            padding: 10px 12px;
            border: 1px solid #9ed9b8;
            border-radius: 9px;
            background: #e9f8ef;
            color: #17663c;
            text-align: left;
            cursor: pointer;
        }

        .bs-single-availability.unavailable {
            border-color: #d7dce3;
            background: #f1f3f5;
            color: #737b87;
        }

        .bs-owner-editor .bs-gallery-preview {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }

        .bs-owner-editor .bs-gallery-item {
            display: grid;
            grid-template-columns: 76px minmax(0, 1fr);
            gap: 10px;
            align-items: center;
            width: auto;
            height: auto;
            padding: 8px;
            overflow: visible;
            border: 1px solid var(--color-border-subtle);
            background: var(--color-white);
        }

        .bs-gallery-thumb-wrap {
            position: relative;
            width: 76px;
            height: 76px;
            overflow: hidden;
            border-radius: 7px;
        }

        .bs-owner-editor .bs-gallery-thumb-wrap img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .bs-photo-assignment {
            display: grid;
            gap: 5px;
            min-width: 0;
            color: var(--color-text-subtle);
            font-size: 11px;
            font-weight: 600;
        }

        .bs-photo-assignment select {
            width: 100%;
            min-height: 38px;
            padding: 7px 9px;
            border: 1px solid var(--color-border-subtle);
            border-radius: 7px;
            background: var(--color-white);
            color: var(--color-text-primary);
        }

        .bs-primary-photo-assignment {
            margin: 10px 0 14px;
        }

        @media (max-width: 767px) {
            .bs-visual-option-row {
                grid-template-columns: minmax(78px, 0.7fr) minmax(0, 1.3fr) 40px;
            }

            .bs-pack-values {
                grid-template-columns: repeat(2, minmax(0, 1fr));
            }

            .bs-owner-editor .bs-gallery-preview {
                grid-template-columns: 1fr;
            }
        }

        /* ===== EDITOR DE PRODUCTO POR SECCIONES ===== */
        .bottom-sheet.owner-mode {
            padding: 0;
            max-height: min(92vh, 860px);
            overflow: hidden;
        }

        .bottom-sheet.owner-mode .bs-handle {
            position: absolute;
            top: 10px;
            left: 50%;
            z-index: 3;
            margin: 0;
            transform: translateX(-50%);
        }

        .bottom-sheet.owner-mode #bsContent {
            max-height: min(92vh, 860px);
        }

        .bs-owner-editor {
            position: relative;
            display: flex;
            flex-direction: column;
            max-height: min(92vh, 860px);
            color: var(--color-text-primary);
        }

        .bs-owner-editor-header {
            flex: 0 0 auto;
            margin: 0;
            padding: 30px 28px 18px;
            border-bottom: 1px solid var(--color-border-subtle);
            background: var(--color-white);
        }

        .bs-editor-header-subtitle {
            margin-top: 4px;
            color: var(--color-text-subtle);
            font-size: 13px;
            line-height: 1.4;
        }

        .bs-editor-sections {
            display: flex;
            flex: 1 1 auto;
            flex-direction: column;
            gap: 12px;
            min-height: 0;
            padding: 18px 28px 24px;
            overflow-y: auto;
            overscroll-behavior: contain;
            scrollbar-gutter: stable;
        }

        .bs-owner-editor.is-sale-config-open .bs-editor-sections {
            overflow: hidden;
        }

        .bs-editor-section {
            flex: 0 0 auto;
            overflow: hidden;
            border: 1px solid var(--color-border-subtle);
            border-radius: 14px;
            background: var(--color-white);
            transition: border-color 0.2s ease, box-shadow 0.2s ease;
        }

        .bs-editor-section[hidden] {
            display: none !important;
        }

        .bs-editor-section.is-open {
            border-color: #cdd8e6;
            box-shadow: 0 5px 18px rgba(15, 23, 42, 0.055);
        }

        body.theme-default .bottom-sheet.owner-mode .bs-editor-section.is-open {
            border-color: color-mix(in srgb, var(--accent-color, #22c55e) 58%, #cdd8e6);
            box-shadow: inset 3px 0 0 var(--accent-color, #22c55e), 0 6px 18px rgba(15, 23, 42, 0.06);
        }

        .bs-editor-section--photos {
            border-color: rgba(0, 122, 255, 0.42);
            background: linear-gradient(180deg, rgba(0, 122, 255, 0.035), var(--color-white) 42%);
        }

        .bs-editor-section-toggle {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 16px;
            width: 100%;
            min-height: 66px;
            padding: 14px 16px;
            border: 0;
            background: transparent;
            color: inherit;
            text-align: left;
            cursor: pointer;
        }

        .bs-editor-section-toggle:focus-visible {
            outline: 3px solid rgba(0, 122, 255, 0.22);
            outline-offset: -3px;
        }

        .bs-editor-section-heading {
            display: flex;
            min-width: 0;
            flex-direction: column;
            gap: 3px;
        }

        .bs-editor-section-title {
            color: var(--color-text-primary);
            font-size: 15px;
            font-weight: 700;
            line-height: 1.25;
        }

        .bs-editor-section-summary {
            overflow: hidden;
            color: var(--color-text-subtle);
            font-size: 12px;
            line-height: 1.3;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .bottom-sheet.owner-mode .bs-editor-section-summary {
            display: -webkit-box;
            overflow: hidden;
            text-overflow: clip;
            white-space: normal;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
        }

        .bottom-sheet.owner-mode .bs-editor-section-title {
            font-size: 14px;
            letter-spacing: 0.01em;
        }

        .bs-editor-section-chevron {
            flex: 0 0 auto;
            color: var(--color-text-subtle);
            font-size: 22px;
            line-height: 1;
            transform: rotate(0deg);
            transition: transform 0.2s ease;
        }

        .bs-editor-section.is-open .bs-editor-section-chevron {
            transform: rotate(180deg);
        }

        .bs-editor-section-body {
            padding: 2px 16px 18px;
            border-top: 1px solid rgba(148, 163, 184, 0.18);
        }

        .bs-editor-section-body[hidden] {
            display: none;
        }

        .bs-product-type-panel {
            margin-top: 0;
            padding-top: 16px;
            border-top: 0;
        }

        #bsSellingEditorSection #bsVariantsSection {
            margin-top: 18px;
            padding-top: 16px;
            border-top: 1px solid var(--color-border-subtle);
        }

        .bs-owner-editor .bs-section {
            margin-bottom: 0;
        }

        .bs-owner-editor .bs-input-group {
            margin: 16px 0 0;
        }

        .bs-owner-editor .bs-radio-group {
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 10px;
        }

        .bs-owner-editor .bs-radio-option {
            min-width: 0;
            align-items: flex-start;
        }

        .bs-owner-editor .bs-radio-content {
            align-items: flex-start;
        }

        .bs-owner-editor .bs-radio-description {
            margin-top: 3px;
        }

        .bottom-sheet.editing-product .bs-sale-summary-card {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 16px;
            margin-top: 16px;
            padding: 15px;
            border: 1px solid var(--color-border-muted, #dfe3ea);
            border-radius: 12px;
            background: var(--color-surface-muted, #f8fafc);
        }

        .bs-sale-summary-copy {
            display: flex;
            min-width: 0;
            flex-direction: column;
            gap: 3px;
        }

        .bs-sale-summary-copy > span {
            color: var(--color-text-subtle, #64748b);
            font-size: 10px;
            font-weight: 700;
            letter-spacing: .06em;
            text-transform: uppercase;
        }

        .bs-sale-summary-copy > strong {
            color: var(--color-text-primary, #111827);
            font-size: 15px;
        }

        .bs-sale-summary-copy > small {
            color: var(--color-text-secondary, #475569);
            font-size: 11px;
            line-height: 1.35;
        }

        .bs-sale-change-btn,
        .bs-save-availability-btn {
            min-height: 40px;
            padding: 9px 13px;
            border: 1px solid color-mix(in srgb, var(--accent-color, #22c55e) 64%, #cbd5e1);
            border-radius: 9px;
            background: var(--color-white, #fff);
            color: var(--color-text-primary, #111827);
            font-size: 12px;
            font-weight: 700;
            cursor: pointer;
        }

        .bs-sale-change-btn:hover,
        .bs-save-availability-btn:hover {
            background: color-mix(in srgb, var(--accent-color, #22c55e) 8%, #fff);
        }

        .bs-sale-summary-help {
            margin-top: 8px;
        }

        .bs-sale-config-overlay {
            position: absolute;
            z-index: 100050;
            inset: 0;
            display: grid;
            place-items: center;
            padding: 18px;
            background: rgba(15, 23, 42, .48);
        }

        .bs-sale-config-overlay[hidden] {
            display: none;
        }

        .bs-sale-config-dialog {
            display: flex;
            width: min(540px, 100%);
            max-height: min(88vh, 820px);
            overflow: hidden;
            flex-direction: column;
            border: 1px solid var(--color-border-subtle, #e2e8f0);
            border-radius: 18px;
            background: var(--color-white, #fff);
            box-shadow: 0 24px 70px rgba(15, 23, 42, .24);
        }

        .bs-sale-config-header,
        .bs-sale-config-actions {
            flex: 0 0 auto;
            background: var(--color-white, #fff);
        }

        .bs-sale-config-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 16px;
            padding: 18px 20px 14px;
            border-bottom: 1px solid var(--color-border-subtle, #e2e8f0);
        }

        .bs-sale-config-header > div {
            display: flex;
            flex-direction: column;
            gap: 2px;
        }

        .bs-sale-config-header span {
            color: var(--color-text-subtle, #64748b);
            font-size: 10px;
            font-weight: 700;
            letter-spacing: .06em;
            text-transform: uppercase;
        }

        .bs-sale-config-header strong {
            color: var(--color-text-primary, #111827);
            font-size: 20px;
        }

        .bs-sale-config-header > button {
            display: grid;
            width: 32px;
            height: 32px;
            place-items: center;
            border: 1px solid var(--color-border-muted, #dfe3ea);
            border-radius: 50%;
            background: var(--color-surface-muted, #f8fafc);
            color: var(--color-text-secondary, #475569);
            font-size: 20px;
            line-height: 1;
            cursor: pointer;
        }

        .bs-sale-config-content {
            flex: 1 1 auto;
            min-height: 0;
            padding: 18px 20px 22px;
            overflow-y: auto;
            overscroll-behavior: contain;
        }

        .bs-sale-wizard-progress {
            height: 3px;
            margin: -18px -20px 20px;
            overflow: hidden;
            background: var(--color-surface-muted, #eef2f7);
        }

        .bs-sale-wizard-progress > span {
            display: block;
            height: 100%;
            border-radius: 0 999px 999px 0;
            background: var(--accent-color, #22c55e);
            transition: width .24s ease;
        }

        .bs-sale-wizard-screen {
            display: flex;
            flex-direction: column;
            gap: 16px;
        }

        .bs-sale-wizard-intro {
            display: flex;
            flex-direction: column;
            gap: 4px;
        }

        .bs-sale-wizard-intro > span {
            color: var(--color-text-subtle, #64748b);
            font-size: 10px;
            font-weight: 700;
            letter-spacing: .06em;
            text-transform: uppercase;
        }

        .bs-sale-wizard-intro > strong {
            color: var(--color-text-primary, #111827);
            font-size: 19px;
            line-height: 1.25;
        }

        .bs-sale-wizard-intro > small {
            color: var(--color-text-secondary, #64748b);
            font-size: 12px;
            line-height: 1.45;
        }

        .bs-sale-wizard-screen > .bs-input-group,
        .bs-sale-wizard-price-grid .bs-input-group {
            margin-top: 0;
        }

        .bs-sale-config-content .bs-product-type-panel {
            padding-top: 0;
        }

        .bs-sale-config-content .bs-radio-group {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }

        .bs-sale-config-content .bs-radio-option {
            min-height: 82px;
            padding: 12px;
        }

        .bs-sale-config-content #bsVariantsSection {
            margin-top: 0;
            padding-top: 0;
            border-top: 0;
        }

        .bs-sale-wizard-options #bsVariantsSection > .bs-section-title,
        .bs-sale-wizard-options #bsVariantsSection > .bs-options-guidance {
            display: none;
        }

        .bs-sale-wizard-options #bsVisualOptionsEditor,
        .bs-sale-wizard-options #bsPackEditor {
            margin-top: 0;
        }

        .bs-sale-config-actions {
            display: grid;
            grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
            gap: 10px;
            padding: 14px 20px 18px;
            border-top: 1px solid var(--color-border-subtle, #e2e8f0);
        }

        .bs-sale-external-field {
            margin-top: 14px;
        }

        .bs-sale-external-field label {
            display: block;
            margin-bottom: 6px;
            color: var(--color-text-primary, #111827);
            font-size: 12px;
            font-weight: 700;
        }

        .bs-option-ready-note {
            align-self: center;
            color: var(--color-text-subtle, #64748b);
            font-size: 11px;
            line-height: 1.35;
            text-align: right;
        }

        .bs-product-availability-card {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
            margin-top: 14px;
            padding: 12px 13px;
            border: 1px solid var(--color-border-muted, #dfe3ea);
            border-radius: 12px;
            background: var(--color-surface-muted, #f8fafc);
        }

        .bs-product-availability-card.is-available {
            border-color: color-mix(in srgb, var(--color-success, #22c55e) 42%, #dfe3ea);
            background: color-mix(in srgb, var(--color-success, #22c55e) 6%, #fff);
        }

        .bs-product-availability-card > div {
            display: flex;
            min-width: 0;
            flex-direction: column;
            gap: 2px;
        }

        .bs-product-availability-card span,
        .bs-product-availability-card small {
            color: var(--color-text-subtle, #64748b);
            font-size: 10px;
            line-height: 1.35;
        }

        .bs-product-availability-card strong {
            color: var(--color-text-primary, #111827);
            font-size: 13px;
        }

        .bs-product-availability-card > button {
            flex: 0 0 auto;
            min-height: 38px;
            padding: 8px 11px;
            border: 1px solid var(--color-border-muted, #dfe3ea);
            border-radius: 8px;
            background: var(--color-white, #fff);
            color: var(--color-text-primary, #111827);
            font-size: 11px;
            font-weight: 700;
            cursor: pointer;
        }

        .bs-availability-manager-copy {
            display: flex;
            flex-direction: column;
            gap: 3px;
            margin: 20px 0 8px;
        }

        .bs-availability-manager-copy strong {
            color: var(--color-text-primary, #111827);
            font-size: 13px;
        }

        .bs-availability-manager-copy span {
            color: var(--color-text-subtle, #64748b);
            font-size: 11px;
            line-height: 1.45;
        }

        .bs-option-manager-heading {
            margin-top: 18px;
            margin-bottom: 8px;
        }

        .bs-option-manager-title-row {
            flex-direction: row;
            align-items: flex-start;
            justify-content: space-between;
            gap: 12px;
        }

        .bs-option-manager-title-row > div {
            display: grid;
            min-width: 0;
            gap: 3px;
        }

        .bs-choice-classification {
            flex: 0 0 auto;
            padding: 5px 8px;
            border: 1px solid color-mix(in srgb, var(--accent-color, #22c55e) 32%, #dfe3ea);
            border-radius: 999px;
            background: color-mix(in srgb, var(--accent-color, #22c55e) 6%, #fff);
            color: var(--accent-color, #16a34a) !important;
            font-size: 10px !important;
            font-weight: 700;
            line-height: 1.2 !important;
            white-space: nowrap;
        }

        .bs-availability-option-manager {
            display: grid;
            gap: 10px;
        }

        .bs-availability-option-row {
            display: grid;
            gap: 9px;
            padding: 10px 12px;
            border: 1px solid var(--color-border-muted, #dfe3ea);
            border-radius: 10px;
            background: var(--color-white, #fff);
        }

        .bs-availability-option-row-heading {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 10px;
        }

        .bs-remove-choice-btn {
            flex: 0 0 auto;
            padding: 4px 0;
            border: 0;
            background: transparent;
            color: var(--color-danger, #dc2626);
            font-size: 10px;
            font-weight: 700;
            cursor: pointer;
        }

        .bs-remove-choice-btn:hover {
            text-decoration: underline;
        }

        .bs-availability-option-label {
            display: flex;
            align-items: baseline;
            gap: 6px;
        }

        .bs-availability-option-label span {
            color: var(--color-text-subtle, #64748b);
            font-size: 10px;
            font-weight: 700;
            letter-spacing: .04em;
            text-transform: uppercase;
        }

        .bs-availability-option-label strong {
            color: var(--color-text-primary, #111827);
            font-size: 13px;
        }

        .bs-availability-option-values {
            display: flex;
            align-items: center;
            gap: 7px;
            flex-wrap: wrap;
        }

        .bs-availability-option-chip,
        .bs-availability-option-add-trigger {
            display: inline-flex;
            min-height: 30px;
            align-items: center;
            gap: 5px;
            padding: 5px 9px;
            border: 1px solid var(--color-border-muted, #dfe3ea);
            border-radius: 999px;
            background: var(--color-white, #fff);
            color: var(--color-text-primary, #111827);
            font-size: 11px;
            line-height: 1;
        }

        .bs-availability-option-add-trigger {
            border-style: dashed;
            border-color: color-mix(in srgb, var(--accent-color, #22c55e) 58%, #cbd5e1);
            color: var(--accent-color, #16a34a);
            font-weight: 700;
            cursor: pointer;
        }

        .bs-availability-option-chip > button {
            display: inline-grid;
            width: 18px;
            height: 18px;
            place-items: center;
            margin-right: -4px;
            padding: 0;
            border: 0;
            border-radius: 50%;
            background: transparent;
            color: var(--color-text-subtle, #64748b);
            font-size: 14px;
            line-height: 1;
            cursor: pointer;
        }

        .bs-availability-option-chip > button:hover {
            background: var(--color-surface-strong, #e2e8f0);
            color: var(--color-danger, #dc2626);
        }

        .bs-availability-quick-values {
            display: flex;
            flex-wrap: wrap;
            gap: 5px;
        }

        .bs-availability-quick-label {
            flex: 0 0 100%;
            margin-bottom: 1px;
            color: var(--color-text-subtle, #64748b);
            font-size: 10px;
            font-weight: 600;
        }

        .bs-availability-quick-values button {
            min-height: 27px;
            padding: 4px 8px;
            border: 1px solid var(--color-border-muted, #dfe3ea);
            border-radius: 999px;
            background: transparent;
            color: var(--color-text-secondary, #475569);
            font-size: 10px;
            cursor: pointer;
        }

        .bs-availability-quick-values button:hover {
            border-color: color-mix(in srgb, var(--accent-color, #22c55e) 42%, #dfe3ea);
            color: var(--accent-color, #16a34a);
        }

        .bs-availability-quick-values button.selected {
            border-color: color-mix(in srgb, var(--accent-color, #22c55e) 62%, #dfe3ea);
            background: color-mix(in srgb, var(--accent-color, #22c55e) 9%, #fff);
            color: var(--accent-color, #16a34a);
            font-weight: 700;
        }

        .bs-availability-selected-values {
            display: grid;
            gap: 6px;
            padding-top: 2px;
        }

        .bs-availability-selected-label {
            color: var(--color-text-primary, #111827);
            font-size: 10px;
            font-weight: 700;
        }

        .bs-availability-selected-chips {
            display: flex;
            flex-wrap: wrap;
            gap: 6px;
        }

        .bs-availability-selected-chip {
            display: inline-flex;
            min-height: 29px;
            align-items: center;
            gap: 5px;
            padding: 5px 7px 5px 9px;
            border: 1px solid color-mix(in srgb, var(--accent-color, #22c55e) 42%, #dfe3ea);
            border-radius: 999px;
            background: color-mix(in srgb, var(--accent-color, #22c55e) 7%, #fff);
            color: var(--color-text-primary, #111827);
            font-size: 11px;
            line-height: 1;
        }

        .bs-availability-selected-chip > button {
            display: inline-grid;
            width: 18px;
            height: 18px;
            place-items: center;
            padding: 0;
            border: 0;
            border-radius: 50%;
            background: transparent;
            color: var(--color-text-subtle, #64748b);
            font-size: 14px;
            line-height: 1;
            cursor: pointer;
        }

        .bs-availability-selected-chip > button:hover {
            background: var(--color-surface-strong, #e2e8f0);
            color: var(--color-danger, #dc2626);
        }

        .bs-add-choice-trigger {
            width: auto;
            min-height: 32px;
            margin-top: 6px;
            padding: 4px 2px;
            border: 0;
            border-radius: 0;
            background: transparent;
            color: var(--accent-color, #16a34a);
            font-size: 12px;
            font-weight: 700;
            cursor: pointer;
        }

        .bs-choice-classification-help {
            margin: 8px 2px 0;
            color: var(--color-text-subtle, #64748b);
            font-size: 10px;
            line-height: 1.45;
        }

        .bs-choice-empty-state {
            display: grid;
            gap: 3px;
            padding: 6px 0;
            border: 0;
            border-radius: 0;
            background: transparent;
        }

        .bs-choice-empty-state strong {
            color: var(--color-text-primary, #111827);
            font-size: 12px;
        }

        .bs-choice-empty-state span {
            color: var(--color-text-subtle, #64748b);
            font-size: 11px;
            line-height: 1.4;
        }

        .bs-choice-creator {
            display: grid;
            gap: 12px;
            margin-top: 10px;
            padding: 14px;
            border: 1px solid color-mix(in srgb, var(--accent-color, #22c55e) 34%, #dfe3ea);
            border-radius: 12px;
            background: var(--color-white, #fff);
            box-shadow: 0 8px 24px rgba(15, 23, 42, .05);
        }

        .bs-choice-creator-heading {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            gap: 12px;
        }

        .bs-choice-creator-heading > div {
            display: grid;
            gap: 2px;
        }

        .bs-choice-creator-heading span,
        .bs-choice-creator-grid label > span {
            color: var(--color-text-subtle, #64748b);
            font-size: 10px;
            font-weight: 700;
        }

        .bs-choice-creator-heading strong {
            color: var(--color-text-primary, #111827);
            font-size: 13px;
        }

        .bs-choice-creator-heading > button {
            width: 28px;
            height: 28px;
            padding: 0;
            border: 0;
            border-radius: 7px;
            background: transparent;
            color: var(--color-text-subtle, #64748b);
            font-size: 18px;
            cursor: pointer;
        }

        .bs-choice-creator-grid {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 10px;
        }

        .bs-choice-creator-grid label {
            display: grid;
            min-width: 0;
            gap: 5px;
        }

        .bs-choice-creator-grid label[hidden] {
            display: none;
        }

        .bs-choice-creator-grid input,
        .bs-choice-creator-grid select {
            width: 100%;
            min-width: 0;
            min-height: 40px;
            padding: 8px 10px;
            border: 1px solid var(--color-border-muted, #dfe3ea);
            border-radius: 8px;
            background: var(--color-white, #fff);
            color: var(--color-text-primary, #111827);
            font: inherit;
            font-size: 12px;
        }

        .bs-choice-manual-value {
            display: grid;
            grid-template-columns: minmax(0, 1fr) auto;
            gap: 6px;
        }

        .bs-choice-manual-value > button {
            min-height: 40px;
            padding: 8px 11px;
            border: 1px solid color-mix(in srgb, var(--accent-color, #22c55e) 52%, #dfe3ea);
            border-radius: 8px;
            background: color-mix(in srgb, var(--accent-color, #22c55e) 7%, #fff);
            color: var(--accent-color, #16a34a);
            font: inherit;
            font-size: 11px;
            font-weight: 700;
            cursor: pointer;
        }

        .bs-choice-manual-value > button:hover {
            background: color-mix(in srgb, var(--accent-color, #22c55e) 12%, #fff);
        }

        .bs-choice-creator-actions {
            display: flex;
            justify-content: flex-end;
            gap: 8px;
        }

        .bs-choice-creator-actions button {
            min-height: 36px;
            padding: 7px 12px;
            border: 0;
            border-radius: 8px;
            background: var(--accent-color, #22c55e);
            color: var(--color-on-accent, #fff);
            font-size: 11px;
            font-weight: 700;
            cursor: pointer;
        }

        .bs-choice-creator-actions .bs-choice-creator-cancel {
            border: 1px solid var(--color-border-muted, #dfe3ea);
            background: transparent;
            color: var(--color-text-secondary, #475569);
        }

        .bs-availability-option-adder {
            display: grid;
            gap: 7px;
        }

        .bs-availability-option-adder-row {
            display: grid;
            grid-template-columns: minmax(0, 1fr) auto auto;
            gap: 7px;
        }

        .bs-availability-option-adder[hidden] {
            display: none;
        }

        .bs-availability-option-adder-row > input {
            min-width: 0;
            min-height: 38px;
            padding: 8px 10px;
            border: 1px solid var(--color-border-muted, #dfe3ea);
            border-radius: 8px;
            background: var(--color-white, #fff);
            color: var(--color-text-primary, #111827);
            font: inherit;
            font-size: 12px;
        }

        .bs-availability-option-adder-row > button {
            min-height: 38px;
            padding: 8px 11px;
            border: 0;
            border-radius: 8px;
            background: var(--accent-color, #22c55e);
            color: var(--color-on-accent, #fff);
            font-size: 11px;
            font-weight: 700;
            cursor: pointer;
        }

        .bs-availability-option-adder-row > .bs-availability-option-cancel {
            width: 38px;
            padding: 0;
            border: 1px solid var(--color-border-muted, #dfe3ea);
            background: transparent;
            color: var(--color-text-secondary, #475569);
            font-size: 16px;
        }

        .bs-save-availability-btn {
            width: 100%;
            margin-top: 16px;
            background: var(--accent-color, #22c55e);
            color: var(--color-on-accent, #fff);
        }

        .bs-availability-row-heading {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 10px;
        }

        .bs-availability-row-heading > strong {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            color: var(--color-text-primary, #111827);
            font-size: 12px;
        }

        .bs-availability-row-heading > button {
            padding: 5px 8px;
            border: 1px solid var(--color-border-muted, #dfe3ea);
            border-radius: 7px;
            background: transparent;
            color: var(--color-text-secondary, #475569);
            font-size: 9px;
            font-weight: 700;
            cursor: pointer;
        }

        .bs-availability-row-card.is-row-limited {
            border-color: #f1b6b6;
            background: #fffafa;
        }

        .bs-primary-photo-note {
            display: flex;
            align-items: center;
            gap: 12px;
            margin: 16px 0 14px;
            padding: 12px;
            border: 1px solid rgba(0, 122, 255, 0.18);
            border-radius: 10px;
            background: rgba(0, 122, 255, 0.055);
        }

        .bs-primary-photo-note > div {
            display: flex;
            min-width: 0;
            flex-direction: column;
            gap: 2px;
        }

        .bs-primary-photo-note .bs-primary-catalog-actions {
            display: flex;
            min-width: 190px;
            margin-left: auto;
            flex: 0 1 230px;
            flex-direction: column;
            gap: 6px;
        }

        .bs-primary-catalog-action-buttons {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 6px;
        }

        .bs-primary-catalog-action-buttons button {
            min-height: 34px;
            padding: 7px 9px;
            border: 1px solid var(--color-border-subtle, #d8dee8);
            border-radius: 8px;
            background: var(--color-surface-base, #fff);
            color: var(--color-text-secondary, #475569);
            font: inherit;
            font-size: 11px;
            font-weight: 700;
            line-height: 1.2;
            cursor: pointer;
        }

        .bs-primary-catalog-action-buttons .pm-delete-catalog-image-btn {
            border-color: rgba(220, 38, 38, 0.28);
            background: rgba(220, 38, 38, 0.055);
            color: #b91c1c;
        }

        .bs-primary-catalog-action-buttons button:hover,
        .bs-primary-catalog-action-buttons button:focus-visible {
            border-color: var(--accent-color, #22c55e);
            outline: none;
        }

        .bs-primary-photo-note .bs-primary-catalog-actions > small {
            color: var(--color-text-subtle, #64748b);
            font-size: 10px;
            line-height: 1.35;
        }

        .bs-primary-photo-note strong {
            color: var(--color-text-primary);
            font-size: 13px;
        }

        .bs-primary-photo-note span:not(.bs-primary-photo-icon) {
            color: var(--color-text-subtle);
            font-size: 12px;
            line-height: 1.4;
        }

        .bs-primary-photo-icon,
        .bs-primary-photo-thumb {
            width: 42px;
            height: 42px;
            flex: 0 0 42px;
            border-radius: 8px;
        }

        .bs-primary-photo-icon {
            display: grid;
            place-items: center;
            background: rgba(0, 122, 255, 0.12);
            color: #007aff;
            font-size: 20px;
        }

        .bs-primary-photo-thumb {
            object-fit: cover;
        }

        .bs-primary-photo-note.is-assignment > div {
            display: grid;
            gap: 5px;
        }

        .bs-primary-photo-note select {
            width: 100%;
            min-height: 38px;
            padding: 7px 9px;
            border: 1px solid var(--color-border-subtle, #d8dee8);
            border-radius: 8px;
            background: var(--color-surface-base, #fff);
            color: var(--color-text-primary, #1f2937);
        }

        @media (max-width: 640px) {
            .bs-primary-photo-note {
                flex-wrap: wrap;
            }

            .bs-primary-photo-note .bs-primary-catalog-actions {
                min-width: 0;
                width: calc(100% - 54px);
                margin-left: 54px;
                flex-basis: calc(100% - 54px);
            }
        }

        .bs-owner-editor .bs-gallery-preview.is-photo-mapping {
            display: block;
        }

        .bs-photo-map-list {
            display: grid;
            gap: 8px;
            width: 100%;
        }

        .bs-photo-map-row {
            display: grid;
            grid-template-columns: 52px minmax(0, 1fr) auto;
            gap: 9px;
            align-items: center;
            min-width: 0;
            padding: 8px;
            border: 1px solid var(--color-border-subtle, #dfe3ea);
            border-radius: 10px;
            background: var(--color-surface-base, #fff);
        }

        .bs-photo-map-thumb {
            position: relative;
            display: grid;
            place-items: center;
            width: 52px;
            height: 52px;
            overflow: hidden;
            border-radius: 8px;
            background: var(--color-surface-muted, #eef2f7);
            color: var(--color-text-muted, #64748b);
            font-size: 9px;
            text-transform: uppercase;
        }

        .bs-photo-map-thumb img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .bs-photo-map-thumb button {
            position: absolute;
            top: 2px;
            right: 2px;
            display: grid;
            place-items: center;
            width: 19px;
            height: 19px;
            padding: 0;
            border: 0;
            border-radius: 50%;
            background: rgba(17, 24, 39, .78);
            color: #fff;
            line-height: 1;
            cursor: pointer;
        }

        .bs-photo-map-copy {
            display: grid;
            gap: 3px;
            min-width: 0;
        }

        .bs-photo-map-copy strong {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            color: var(--color-text-primary, #1f2937);
            font-size: 12px;
        }

        .bs-photo-map-copy strong i {
            width: 13px;
            height: 13px;
            flex: 0 0 13px;
            border: 1px solid color-mix(in srgb, var(--color-text-primary, #1f2937) 24%, transparent);
            border-radius: 4px;
            background: var(--option-color);
        }

        .bs-photo-map-copy span {
            color: var(--color-text-muted, #64748b);
            font-size: 10px;
            line-height: 1.35;
        }

        .bs-photo-map-upload,
        .bs-photo-map-badge {
            min-height: 36px;
            padding: 0 10px;
            border-radius: 8px;
            font-size: 10px;
            font-weight: 700;
            white-space: nowrap;
        }

        .bs-photo-map-upload {
            border: 1px dashed var(--color-border-subtle, #cbd5e1);
            background: var(--color-surface-base, #fff);
            color: var(--accent-color, #007aff);
            cursor: pointer;
        }

        /*
         * Negro y Matrix aplican reglas globales de controles a sus botones.
         * Este cargador necesita conservar la geometría compacta del editor:
         * el texto siempre queda dentro de la caja y centrado en ambos ejes.
         */
        body:is(.theme-negro, .theme-matrix) .bottom-sheet.owner-mode .bs-photo-map-upload {
            display: inline-flex !important;
            align-items: center !important;
            justify-content: center !important;
            width: auto !important;
            min-width: 108px !important;
            max-width: 100% !important;
            height: 40px !important;
            min-height: 40px !important;
            padding: 0 12px !important;
            overflow: hidden !important;
            appearance: none;
            line-height: 1.1 !important;
            text-align: center !important;
            text-indent: 0 !important;
            text-overflow: clip;
            white-space: nowrap !important;
            writing-mode: horizontal-tb !important;
        }

        body:is(.theme-negro, .theme-matrix) .bottom-sheet.owner-mode .bs-photo-map-upload::before,
        body:is(.theme-negro, .theme-matrix) .bottom-sheet.owner-mode .bs-photo-map-upload::after {
            content: none !important;
        }

        .bs-photo-map-badge {
            display: inline-flex;
            align-items: center;
            background: var(--color-surface-muted, #eef2f7);
            color: var(--color-text-muted, #64748b);
        }

        .bs-photo-general-preview {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            margin-top: 10px;
        }

        .bs-photo-general-preview .bs-gallery-thumb-wrap {
            flex: 0 0 64px;
            width: 64px;
            height: 64px;
        }

        .bs-general-photo-copy {
            display: none;
        }

        .bs-general-photo-upload.is-mapping {
            display: grid;
            grid-template-columns: minmax(0, 1fr) auto;
            gap: 10px;
            align-items: center;
            margin-top: 10px;
            padding: 10px;
            border: 1px dashed var(--color-border-subtle, #cbd5e1);
            border-radius: 10px;
            background: var(--color-surface-muted, #f8fafc);
        }

        .bs-general-photo-upload.is-mapping .bs-general-photo-copy {
            display: grid;
            gap: 2px;
        }

        .bs-general-photo-copy strong {
            color: var(--color-text-primary, #1f2937);
            font-size: 11px;
        }

        .bs-general-photo-copy span {
            color: var(--color-text-muted, #64748b);
            font-size: 9px;
        }

        .bs-editor-field-grid {
            display: grid;
            gap: 0 14px;
        }

        .bs-editor-field-grid--two {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }

        .bs-editor-field-grid--four {
            grid-template-columns: repeat(4, minmax(0, 1fr));
        }

        .bs-subsection-title {
            margin-top: 18px;
            padding-top: 16px;
            border-top: 1px solid var(--color-border-subtle);
            color: var(--color-text-primary);
            font-size: 13px;
            font-weight: 700;
        }

        .bs-editor-intro {
            margin: 16px 0 0;
        }

        .bs-owner-actions {
            position: relative;
            z-index: 2;
            flex: 0 0 auto;
            margin: 0;
            padding: 14px 28px 18px;
            border-top: 1px solid var(--color-border-subtle);
            background: var(--color-white);
            box-shadow: 0 -10px 22px rgba(15, 23, 42, 0.055);
        }

        .bs-owner-actions .bs-btn {
            min-height: 48px;
            padding: 12px 16px;
        }

        @media (min-width: 768px) {
            .bottom-sheet.owner-mode {
                width: min(760px, calc(100vw - 40px));
                max-width: 760px;
            }
        }

        @media (max-width: 767px) {
            .bottom-sheet.owner-mode,
            .bottom-sheet.owner-mode #bsContent,
            .bs-owner-editor {
                max-height: 94vh;
            }

            .bs-owner-editor-header {
                padding: 28px 18px 14px;
            }

            .bs-editor-sections {
                gap: 10px;
                padding: 14px 14px 18px;
                scrollbar-gutter: auto;
            }

            .bs-editor-section-toggle {
                min-height: 62px;
                padding: 12px 14px;
            }

            .bs-editor-section-body {
                padding: 2px 14px 16px;
            }

            .bs-owner-editor .bs-radio-group,
            .bs-editor-field-grid--two {
                grid-template-columns: 1fr;
            }

            .bs-editor-field-grid--four {
                grid-template-columns: repeat(2, minmax(0, 1fr));
            }

            .bs-owner-actions {
                padding: 12px 14px calc(12px + env(safe-area-inset-bottom));
            }

            .bs-owner-actions .bs-btn {
                font-size: 14px;
            }
        }

        /* Editor de opciones alineado con el flujo de creación. */
        .bs-kind-intro {
            display: grid;
            gap: 3px;
            margin-bottom: 10px;
            color: var(--color-text-primary, #111827);
            font-size: 13px;
        }

        .bs-kind-intro span,
        .bs-option-builder-heading span,
        .bs-option-color-title span {
            color: var(--color-text-muted, #6b7280);
            font-size: 11px;
            font-weight: 400;
            line-height: 1.4;
        }

        .bs-kind-grid,
        .bs-variant-photo-mode {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 9px;
        }

        .bs-kind-card,
        .bs-variant-photo-mode-card {
            display: grid;
            gap: 4px;
            min-width: 0;
            padding: 12px;
            border: 1px solid var(--color-border-muted, #dfe3ea);
            border-radius: 10px;
            background: var(--color-surface-base, #fff);
            color: var(--color-text-primary, #111827);
            text-align: left;
            cursor: pointer;
            transition: border-color .18s ease, background .18s ease, box-shadow .18s ease;
        }

        .bs-kind-card strong,
        .bs-variant-photo-mode-card strong { font-size: 12px; line-height: 1.3; }
        .bs-kind-card span,
        .bs-variant-photo-mode-card span { color: var(--color-text-muted, #6b7280); font-size: 10px; line-height: 1.35; }

        .bs-kind-card:hover,
        .bs-variant-photo-mode-card:hover,
        .bs-variant-photo-mode-card.selected {
            border-color: var(--accent-color, #22c55e);
            box-shadow: 0 0 0 1px var(--accent-color, #22c55e);
        }

        .bottom-sheet.owner-mode .bs-variant-photo-mode-card {
            position: relative;
        }

        .bottom-sheet.owner-mode .bs-variant-photo-mode-card.selected {
            padding-right: 42px;
            background: var(--color-surface-soft);
            box-shadow: inset 0 0 0 1px var(--accent-color, #22c55e);
        }

        .bottom-sheet.owner-mode .bs-variant-photo-mode-card.selected::after {
            content: '\2713';
            position: absolute;
            top: 10px;
            right: 10px;
            display: grid;
            width: 20px;
            height: 20px;
            place-items: center;
            border-radius: 50%;
            background: var(--accent-color, #22c55e);
            color: var(--color-white, #fff);
            font-size: 12px;
            font-weight: 800;
            line-height: 1;
        }

        .bs-option-step.is-kind-empty .bs-option-builder-controls { display: none; }

        .bs-option-builder-heading {
            display: flex;
            justify-content: space-between;
            gap: 10px;
            align-items: flex-start;
            margin-bottom: 11px;
            padding: 11px 12px;
            border: 1px solid var(--color-border-muted, #dfe3ea);
            border-radius: 10px;
            background: var(--color-surface-muted, #f8fafc);
        }

        .bs-option-builder-heading > div:first-child { display: grid; gap: 3px; }
        .bs-option-builder-actions { display: flex; gap: 4px; flex: 0 0 auto; }
        .bs-option-builder-actions button {
            padding: 5px 7px;
            border: 0;
            background: transparent;
            color: var(--accent-color, #0ea5e9);
            font-size: 10px;
            cursor: pointer;
        }

        .bs-option-type-select.bs-kind-native { display: none !important; }

        .bs-option-color-tools {
            display: grid;
            gap: 9px;
            margin: 10px 0;
            padding: 11px;
            border: 1px solid var(--color-border-muted, #dfe3ea);
            border-radius: 10px;
            background: var(--color-surface-muted, #f8fafc);
        }

        .bs-option-color-tools--compact {
            gap: 7px;
            margin: 0;
            padding: 9px;
            border-radius: 8px;
        }

        .bs-option-color-tools--compact .bs-option-color-title strong {
            color: var(--color-text-secondary, #475569);
            font-size: 10px;
        }

        .bs-option-color-title { display: grid; gap: 2px; }
        .bs-option-color-presets { display: flex; flex-wrap: wrap; gap: 6px; }
        .bs-option-color-choice {
            display: inline-flex;
            align-items: center;
            gap: 5px;
            min-height: 30px;
            padding: 5px 8px;
            border: 1px solid var(--color-border-muted, #dfe3ea);
            border-radius: 999px;
            background: var(--color-surface-base, #fff);
            color: var(--color-text-primary, #111827);
            font-size: 10px;
            cursor: pointer;
        }

        .bs-option-color-choice i,
        .bs-option-tag-color {
            display: inline-block;
            width: 12px;
            height: 12px;
            flex: 0 0 12px;
            border: 1px solid color-mix(in srgb, var(--color-text-primary, #111827) 22%, transparent);
            border-radius: 50%;
            background: var(--option-color);
            vertical-align: -2px;
        }

        .bs-option-color-choice.selected {
            border-color: var(--accent-color, #22c55e);
            background: color-mix(in srgb, var(--accent-color, #22c55e) 8%, var(--color-surface-base, #fff));
        }

        .bs-option-custom-color {
            display: none;
            grid-template-columns: 40px minmax(0, 1fr);
            gap: 9px;
            align-items: center;
            color: var(--color-text-muted, #6b7280);
            font-size: 10px;
            cursor: pointer;
        }
        .bs-option-custom-color.active { display: grid; }
        .bs-option-custom-color input[type="color"] {
            width: 40px;
            height: 34px;
            padding: 3px;
            border: 1px solid var(--color-border-muted, #dfe3ea);
            border-radius: 7px;
            background: var(--color-surface-base, #fff);
        }
        .bs-option-custom-color span,
        .bs-option-custom-color strong,
        .bs-option-custom-color small { display: block; }
        .bs-option-custom-color strong {
            margin-bottom: 2px;
            color: var(--color-text-primary, #111827);
            font-size: 10px;
        }

        .bs-option-tag { align-items: center; gap: 5px; }
        .bs-option-add-btn { width: auto; min-width: 76px; padding-inline: 12px; }

        .bs-option-manual-hint {
            margin: 6px 2px 10px;
            padding: 0;
            border: 0;
            background: transparent;
            color: var(--color-text-muted, #6b7280);
            font-size: 11px;
            line-height: 1.45;
        }

        .bs-availability-summary {
            display: inline-flex;
            margin: 0 0 8px;
            padding: 5px 8px;
            border-radius: 999px;
            background: color-mix(in srgb, var(--accent-color, #22c55e) 10%, var(--color-surface-base, #fff));
            color: var(--color-text-secondary, #374151);
            font-size: 10px;
            font-weight: 600;
        }
        .bs-availability-row-list { display: grid; gap: 8px; }
        .bs-availability-row-card {
            display: grid;
            gap: 8px;
            padding: 11px;
            border: 1px solid var(--color-border-muted, #dfe3ea);
            border-radius: 10px;
            background: var(--color-surface-base, #fff);
        }
        .bs-availability-row-card > strong,
        .bs-availability-choice,
        .bs-single-availability { display: inline-flex; align-items: center; gap: 6px; }
        .bs-availability-row-options,
        .bs-single-availability-list { display: flex; flex-wrap: wrap; gap: 7px; }
        .bs-availability-choice,
        .bs-single-availability {
            justify-content: space-between;
            min-height: 36px;
            padding: 7px 9px;
            border: 1px solid color-mix(in srgb, var(--color-success, #22c55e) 52%, var(--color-border-muted, #dfe3ea));
            border-radius: 8px;
            background: color-mix(in srgb, var(--color-success, #22c55e) 9%, var(--color-surface-base, #fff));
            color: var(--color-text-primary, #111827);
            font-size: 10px;
            cursor: pointer;
        }
        .bs-availability-choice > strong,
        .bs-single-availability.available > strong {
            color: color-mix(in srgb, var(--color-success, #22c55e) 72%, var(--color-text-primary, #111827));
            font-size: 9px;
        }
        .bs-availability-choice.unavailable,
        .bs-single-availability.unavailable {
            border-color: var(--color-border-muted, #dfe3ea);
            background: var(--color-surface-muted, #f3f4f6);
            opacity: .72;
        }
        .bs-availability-choice.unavailable > strong,
        .bs-single-availability.unavailable > strong { color: var(--color-text-muted, #6b7280); }

        .bs-pack-editor { padding: 0; overflow: hidden; }
        .bs-pack-panel-toggle {
            display: flex;
            justify-content: space-between;
            width: 100%;
            padding: 11px 12px;
            border: 0;
            background: transparent;
            color: var(--color-text-primary, #111827);
            font-size: 11px;
            font-weight: 600;
            cursor: pointer;
        }
        .bs-pack-panel-toggle small { color: var(--color-text-muted, #6b7280); font-weight: 400; }
        .bs-pack-panel-content { display: none; padding: 0 12px 12px; }
        .bs-pack-editor.open .bs-pack-panel-content { display: block; }

        .bs-variant-photo-question {
            display: grid;
            gap: 4px;
            margin: 12px 0;
            padding: 12px;
            border: 1px solid var(--color-border-muted, #dfe3ea);
            border-radius: 10px;
            background: var(--color-surface-base, #fff);
        }
        .bs-variant-photo-question > span { margin-bottom: 6px; color: var(--color-text-muted, #6b7280); font-size: 11px; }
        .bs-gallery-add-btn:disabled { opacity: .5; cursor: not-allowed; }

        @media (max-width: 560px) {
            .bs-kind-grid,
            .bs-variant-photo-mode { grid-template-columns: 1fr; }
            .bs-option-builder-heading { display: grid; }
            .bs-option-builder-actions { justify-content: flex-end; }

            .bs-sale-config-overlay {
                align-items: end;
                padding: 0;
            }

            .bs-sale-config-dialog {
                width: 100%;
                max-height: 94vh;
                border-radius: 18px 18px 0 0;
            }

            .bs-sale-config-content .bs-radio-group {
                grid-template-columns: 1fr;
            }

            .bs-sale-summary-card,
            .bs-product-availability-card {
                align-items: stretch;
                flex-direction: column;
            }

            .bs-sale-change-btn,
            .bs-product-availability-card > button {
                width: 100%;
            }

            .bs-option-manager-title-row,
            .bs-availability-option-row-heading {
                align-items: flex-start;
            }

            .bs-option-manager-title-row {
                flex-direction: column;
            }

            .bs-choice-creator-grid {
                grid-template-columns: 1fr;
            }

            .bs-option-ready-note {
                text-align: left;
            }

            .bs-photo-map-row {
                grid-template-columns: 48px minmax(0, 1fr);
            }

            .bs-photo-map-thumb {
                width: 48px;
                height: 48px;
            }

            .bs-photo-map-upload,
            .bs-photo-map-badge {
                grid-column: 2;
                justify-self: start;
            }

            .bs-general-photo-upload.is-mapping {
                grid-template-columns: 1fr;
            }
        }

        @media (prefers-reduced-motion: reduce) {
            .bs-option-manual-input.bs-pending-option-highlight {
                animation: none;
                box-shadow: 0 0 0 3px rgba(245, 158, 11, .22);
            }
        }
        


         /* Modales de configuración */
         .config-modal {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.5);
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 1000;
        }
        
        .config-modal-content {
            background: var(--color-white);
            border-radius: 16px;
            padding: 32px;
            max-width: 480px;
            width: 97%;
            max-height: 80vh;
            overflow-y: auto;
        }
        
        .config-modal-content h3 {
            margin: 0 0 8px 0;
            font-size: 1.25rem;
            font-weight: 600;
            color: var(--color-text-strong);
        }
        
        /* ===== CONFIG MODAL CON TABS ===== */
        .config-modal-tabs {
            padding: 24px 0 24px 0;
            display: flex;
            flex-direction: column;
            max-height: 85vh;
            height: 85vh;
            overflow: hidden;
        }
        
        .config-modal-tabs h3 {
            padding: 0 24px;
            margin-bottom: 16px;
            flex-shrink: 0;
        }
        
        .config-tabs-header {
            display: flex;
            border-bottom: 2px solid var(--color-border-muted);
            padding: 0 24px;
            gap: 4px;
            flex-shrink: 0;
        }
        
        .config-tab {
            flex: 1;
            padding: 12px 8px;
            background: none;
            border: none;
            font-size: 0.85rem;
            font-weight: 500;
            color: var(--color-text-muted);
            cursor: pointer;
            position: relative;
            transition: color 0.2s;
            white-space: nowrap;
            border-right: 2px solid #eaeaea38;
        }
        
        .config-tab:hover {
            color: var(--color-text-secondary);
        }
        
        .config-tab.active {
            color: var(--color-info);
        }
        
        .config-tab.active::after {
            content: '';
            position: absolute;
            bottom: -2px;
            left: 0;
            right: 0;
            height: 2px;
            background: var(--color-info);
            border-radius: 2px 2px 0 0;
        }

        #business-config-modal .config-tab.has-subscription-warning {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 5px;
        }

        #business-config-modal .subscription-warning-symbol.is-tab {
            flex: 0 0 auto;
            color: #f59e0b !important;
            font-size: 12px !important;
            transform: translateY(-1px);
        }
        
        .config-tabs-container {
            flex: 1;
            overflow: hidden;
            position: relative;
            min-height: 0; /* Importante para que flex children puedan scrollear */
        }
        
        .config-tabs-wrapper {
            display: flex;
            height: 100%;
            transition: transform 0.3s ease;
            touch-action: pan-y;
        }
        
        .config-tab-panel {
            min-width: 100%;
            width: 100%;
            height: 100%;
            flex-shrink: 0;
            overflow-y: auto;
            overflow-x: hidden;
            padding: 20px 24px;
            box-sizing: border-box;
            -webkit-overflow-scrolling: touch; /* Scroll suave en iOS */
            overscroll-behavior: contain; /* Evita scroll propagation */
        }
        
        .config-modal-tabs .form-buttons {
            padding: 2px 24px 0;
            margin-top: auto;
            flex-shrink: 0;
        } 

        /* Modo de pedidos vive dentro del guardado de WhatsApp y Entregas. */
        #whatsapp-config-modal .order-mode-tab-panel .config-form {
            display: grid;
            gap: 16px;
        }

        #whatsapp-config-modal .order-mode-intro h4 {
            margin: 0 0 4px;
            color: var(--color-text-strong, #111827);
            font-size: 1rem;
        }

        #whatsapp-config-modal .order-mode-intro p {
            margin: 0;
            color: var(--color-text-muted, #6b7280);
            font-size: 0.82rem;
            line-height: 1.45;
        }

        #whatsapp-config-modal .order-mode-settings {
            display: grid;
            gap: 10px;
        }

        #whatsapp-config-modal .order-mode-settings .config-group {
            margin: 0;
        }

        #whatsapp-config-modal .order-mode-card {
            display: flex;
            align-items: flex-start;
            gap: 11px;
            padding: 13px 14px;
            border: 1px solid var(--color-border-muted, #e5e7eb);
            border-radius: 10px;
            background: var(--color-surface-soft, #f8fafc);
            cursor: pointer;
            transition: border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
        }

        #whatsapp-config-modal .order-mode-card input {
            width: 16px;
            height: 16px;
            margin: 2px 0 0;
            flex: 0 0 auto;
        }

        #whatsapp-config-modal .order-mode-card--whatsapp input {
            accent-color: #16a34a;
        }

        #whatsapp-config-modal .order-mode-card--contact input {
            accent-color: var(--accent-color, #ec4899);
        }

        #whatsapp-config-modal .order-mode-card.is-selected {
            border-color: color-mix(in srgb, var(--accent-color, #ec4899) 62%, #ffffff);
            background: color-mix(in srgb, var(--accent-color, #ec4899) 7%, #ffffff);
            box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent-color, #ec4899) 9%, transparent);
        }

        #whatsapp-config-modal .order-mode-card--whatsapp.is-selected {
            border-color: #86d7a2;
            background: #f0fdf4;
            box-shadow: 0 0 0 2px rgba(22, 163, 74, 0.08);
        }

        #whatsapp-config-modal .order-mode-title {
            display: block;
            color: var(--color-text-strong, #111827);
            font-size: 0.9rem;
            font-weight: 650;
        }

        #whatsapp-config-modal .order-mode-description {
            display: block;
            margin-top: 3px;
            color: var(--color-text-muted, #6b7280);
            font-size: 0.78rem;
            line-height: 1.4;
        }

        #whatsapp-config-modal #contact-mode-fields {
            padding: 16px;
            border: 1px solid var(--color-border-muted, #e5e7eb);
            border-radius: 12px;
            background: var(--color-surface-soft, #f8fafc);
        }

        #whatsapp-config-modal .contact-transfer-settings {
            margin-top: 16px;
            padding-top: 16px;
            border-top: 1px solid var(--color-border-muted, #e5e7eb);
        }

        #whatsapp-config-modal .contact-transfer-heading,
        #whatsapp-config-modal .contact-transfer-help {
            display: block;
        }

        #whatsapp-config-modal .contact-transfer-heading {
            margin-bottom: 4px;
            color: var(--color-text-strong, #111827);
            font-size: 0.88rem;
            font-weight: 650;
        }

        #whatsapp-config-modal .contact-transfer-heading span,
        #whatsapp-config-modal .contact-transfer-help {
            color: var(--color-text-muted, #6b7280);
            font-weight: 400;
        }

        #whatsapp-config-modal .contact-transfer-help {
            margin-bottom: 12px;
            font-size: 0.78rem;
        }

        /* Editor directo de descuentos por categoría. */
        .category-discount-modal-content {
            max-width: 520px;
            padding: 0;
            overflow: hidden;
        }

        .category-discount-modal-header {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            gap: 16px;
            padding: 22px 22px 16px;
            border-bottom: 1px solid var(--color-border-muted, #e5e7eb);
        }

        .category-discount-modal-header h3 {
            margin: 3px 0 0;
        }

        .category-discount-eyebrow {
            color: var(--color-text-muted, #6b7280);
            font-size: 0.7rem;
            font-weight: 650;
            letter-spacing: 0.05em;
            text-transform: uppercase;
        }

        .category-discount-close {
            display: grid;
            place-items: center;
            width: 32px;
            height: 32px;
            padding: 0;
            border: 0;
            border-radius: 50%;
            background: transparent;
            color: var(--color-text-muted, #6b7280);
            font-size: 1.35rem;
            cursor: pointer;
        }

        .category-discount-close:hover {
            background: var(--color-surface-soft, #f3f4f6);
            color: var(--color-text-strong, #111827);
        }

        .category-discount-scope {
            margin: 16px 22px 0;
            padding: 11px 12px;
            border-radius: 9px;
            background: color-mix(in srgb, var(--accent-color, #ec4899) 7%, #ffffff);
            color: var(--color-text-secondary, #475569);
            font-size: 0.8rem;
            line-height: 1.45;
        }

        .category-discount-form {
            max-height: calc(80vh - 210px);
            padding: 16px 22px;
            overflow-y: auto;
        }

        #category-discount-modal #category-selector-group {
            display: none !important;
        }

        .category-discount-form #copy-ranges-group {
            margin-bottom: 14px;
        }

        .category-discount-form #copy-ranges-group label {
            display: block;
            margin-bottom: 6px;
        }

        .category-discount-form #copy-ranges-select {
            width: 100%;
            height: 40px;
            padding: 0 11px;
            border: 1px solid var(--color-border-muted, #d1d5db);
            border-radius: 8px;
            background: var(--color-white, #ffffff);
            color: var(--color-text-strong, #111827);
            font: inherit;
        }

        .category-discount-checkbox {
            padding: 11px 12px;
            border: 1px solid var(--color-border-muted, #e5e7eb);
            border-radius: 9px;
            background: var(--color-surface-soft, #f8fafc);
        }

        .category-discount-form .discount-range-form {
            margin-top: 12px;
            padding: 14px;
            border: 1px dashed var(--color-border-muted, #d1d5db);
            border-radius: 10px;
            background: var(--color-surface-soft, #f8fafc);
        }

        .discount-range-form-title {
            display: block;
            margin-bottom: 10px;
            color: var(--color-text-strong, #111827);
            font-size: 0.86rem;
        }

        .discount-range-fields {
            display: grid;
            grid-template-columns: 1fr 1fr auto;
            align-items: end;
            gap: 10px;
        }

        .discount-range-fields > label {
            display: grid;
            gap: 5px;
            color: var(--color-text-muted, #6b7280);
            font-size: 0.76rem;
        }

        .discount-range-input-row {
            display: flex;
            align-items: center;
            gap: 6px;
        }

        .discount-range-input-row input {
            width: 100%;
            min-width: 0;
            height: 40px;
            padding: 0 10px;
            border: 1px solid var(--color-border-muted, #d1d5db);
            border-radius: 8px;
            background: var(--color-white, #ffffff);
            color: var(--color-text-strong, #111827);
            box-sizing: border-box;
            font: inherit;
            font-size: 0.88rem;
            outline: none;
        }

        .discount-range-input-row input:focus {
            border-color: var(--accent-color, #ec4899);
            box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-color, #ec4899) 12%, transparent);
        }

        .discount-range-fields .btn-create {
            min-width: 94px;
            height: 40px;
            padding: 0 16px;
        }

        .category-discount-footer {
            justify-content: flex-end;
            margin: 0;
            padding: 12px 22px 18px;
            border-top: 1px solid var(--color-border-muted, #e5e7eb);
        }

        .category-discount-footer .btn-cancel {
            flex: 0 0 auto;
            min-width: 104px;
        }

        @media (max-width: 520px) {
            .category-discount-modal-content {
                width: calc(100% - 20px);
                max-height: calc(100dvh - 20px);
            }

            .category-discount-form {
                max-height: calc(100dvh - 270px);
            }

            .discount-range-fields {
                grid-template-columns: 1fr 1fr;
            }

            .discount-range-fields .btn-create {
                grid-column: 1 / -1;
                width: 100%;
            }
        }

        /* ===== CONFIGURACIÓN GENERAL DEL NEGOCIO ===== */
        #business-config-modal .business-status-strip {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 16px;
            min-height: 42px;
            margin: 0 24px 10px;
            padding: 9px 12px;
            border: 1px solid var(--color-border-muted);
            border-radius: 10px;
            background: #f8fafc;
            box-sizing: border-box;
            flex-shrink: 0;
        }

        #business-config-modal .business-status-main {
            display: inline-flex;
            align-items: center;
            min-width: 0;
            gap: 8px;
        }

        #business-config-modal .business-status-dot {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: #f59e0b;
            box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.13);
            flex: 0 0 auto;
        }

        #business-config-modal .business-status-strip.is-public .business-status-dot {
            background: #16a34a;
            box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.13);
        }

        #business-config-modal .business-status-label {
            overflow: hidden;
            color: var(--color-text-strong);
            font-size: 0.82rem;
            font-weight: 600;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        #business-config-modal .business-status-visits {
            color: var(--color-text-muted);
            font-size: 0.76rem;
            font-weight: 500;
            white-space: nowrap;
        }

        #business-config-modal .business-config-section-heading {
            margin: 0 0 20px;
            padding: 0 0 14px;
            border-bottom: 1px solid var(--color-border-muted);
        }

        #business-config-modal .business-config-section-heading h4 {
            margin: 0 0 5px;
            color: var(--color-text-strong);
            font-size: 0.98rem;
            font-weight: 650;
        }

        #business-config-modal .business-config-section-heading p {
            margin: 0;
            color: var(--color-text-muted);
            font-size: 0.8rem;
            line-height: 1.45;
        }

        #business-config-modal .business-config-subsection {
            margin-top: 24px;
            padding-top: 20px;
            border-top: 1px solid var(--color-border-muted);
        }

        #business-config-modal .business-config-subsection .business-config-section-heading {
            margin-bottom: 18px;
            padding-bottom: 0;
            border-bottom: 0;
        }

        #business-config-modal .business-config-field-label {
            margin: 18px 0 10px;
            color: var(--color-text-secondary);
            font-size: 0.82rem;
            font-weight: 600;
        }

        #business-config-modal .business-config-field-label:first-child {
            margin-top: 0;
        }

        #business-config-modal .business-config-field-heading {
            display: flex;
            align-items: center;
            gap: 7px;
            margin-top: 18px;
        }

        #business-config-modal .business-config-field-heading .business-config-field-label {
            margin: 0;
        }

        .marker-style-help-trigger {
            display: inline-flex;
            width: 20px;
            height: 20px;
            flex: 0 0 20px;
            align-items: center;
            justify-content: center;
            padding: 0;
            border: 1px solid var(--color-border-muted);
            border-radius: 50%;
            background: transparent;
            color: var(--color-text-muted);
            font-family: inherit;
            font-size: 0.72rem;
            font-weight: 600;
            line-height: 1;
            cursor: pointer;
            transition: border-color 0.18s ease, color 0.18s ease, background 0.18s ease;
        }

        .marker-style-help-trigger:hover,
        .marker-style-help-trigger:focus-visible {
            border-color: var(--accent-color);
            background: var(--color-surface-muted);
            color: var(--accent-color);
            outline: none;
        }

        .marker-style-help-modal {
            z-index: 1120;
            padding: 20px;
        }

        .marker-style-help-dialog {
            position: relative;
            width: min(100%, 380px);
            padding: 42px 24px 24px;
            border: 1px solid var(--color-border-muted);
            border-radius: 16px;
            background: var(--color-surface-base, #fff);
            box-shadow: 0 18px 48px rgba(15, 23, 42, 0.2);
        }

        .marker-style-help-close {
            position: absolute;
            top: 10px;
            right: 12px;
            display: inline-flex;
            width: 28px;
            height: 28px;
            align-items: center;
            justify-content: center;
            padding: 0;
            border: 0;
            border-radius: 50%;
            background: transparent;
            color: var(--color-text-muted);
            font-size: 1.25rem;
            line-height: 1;
            cursor: pointer;
        }

        .marker-style-help-close:hover,
        .marker-style-help-close:focus-visible {
            background: var(--color-surface-muted);
            color: var(--color-text-strong);
            outline: none;
        }

        .marker-style-help-previews {
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            align-items: start;
            gap: 14px;
        }

        .marker-style-help-previews.is-markers-only {
            grid-template-columns: repeat(2, minmax(0, 112px));
            justify-content: center;
        }

        .marker-style-help-previews.is-bar-only {
            grid-template-columns: minmax(0, 150px);
            justify-content: center;
        }

        .marker-style-help-preview[hidden] {
            display: none;
        }

        .marker-style-help-preview {
            min-width: 0;
            padding: 6px;
            border: 1px solid var(--color-border-muted);
            border-radius: 10px;
            background: var(--color-surface-muted);
        }

        .marker-style-help-image {
            position: relative;
            height: 112px;
            overflow: hidden;
            border-radius: 7px;
            background:
                linear-gradient(145deg, transparent 54%, rgba(148, 163, 184, 0.2) 55%),
                linear-gradient(35deg, rgba(148, 163, 184, 0.14) 36%, transparent 37%),
                var(--color-surface-base, #fff);
        }

        .marker-style-help-cart,
        .marker-style-help-dot {
            position: absolute;
            right: 10px;
            bottom: 12px;
        }

        .marker-style-help-cart {
            display: inline-flex;
            width: 27px;
            height: 27px;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            background: var(--accent-color);
        }

        .marker-style-help-cart svg {
            width: 14px;
            height: 14px;
            fill: #fff;
        }

        .marker-style-help-dot {
            width: 14px;
            height: 14px;
            border: 3px solid var(--accent-color);
            border-radius: 50%;
            background: var(--color-surface-base, #fff);
        }

        .marker-style-help-preview--bar .marker-style-help-image {
            border-radius: 7px 7px 2px 2px;
        }

        .marker-style-help-bar {
            display: grid;
            grid-template-columns: minmax(0, 1fr) 20px;
            align-items: center;
            gap: 6px;
            min-height: 31px;
            margin-top: 5px;
            padding: 5px 7px;
            border: 1px solid var(--accent-color);
            border-radius: 5px;
            background: var(--color-surface-base, #fff);
        }

        .marker-style-help-bar i,
        .marker-style-help-bar b {
            display: block;
        }

        .marker-style-help-bar i {
            width: 76%;
            height: 4px;
            border-radius: 4px;
            background: var(--color-text-muted);
            opacity: 0.6;
        }

        .marker-style-help-bar b {
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background: var(--accent-color);
        }

        @media (max-width: 380px) {
            .marker-style-help-dialog {
                padding-inline: 16px;
            }

            .marker-style-help-previews {
                gap: 8px;
            }

            .marker-style-help-image {
                height: 92px;
            }
        }

        #business-config-modal .business-config-field-help {
            display: block;
            margin-top: 8px;
        }

        #business-config-modal .business-config-toggle-group {
            margin-top: 20px;
        }

        #business-config-modal .business-subscription-card {
            padding: 17px;
            border: 1px solid var(--color-border-muted);
            border-radius: 12px;
            background: var(--color-surface-muted);
        }

        #business-config-modal .business-subscription-summary {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            gap: 16px;
        }

        #business-config-modal .business-subscription-copy {
            display: flex;
            min-width: 0;
            flex-direction: column;
            gap: 3px;
        }

        #business-config-modal .business-subscription-label {
            color: var(--color-text-muted);
            font-size: 0.72rem;
            font-weight: 600;
        }

        #business-config-modal .business-subscription-copy strong {
            color: var(--color-text-strong);
            font-size: 1.04rem;
            font-weight: 700;
            line-height: 1.3;
        }

        #business-config-modal .business-subscription-badge {
            flex: 0 0 auto;
            padding: 4px 8px;
            border-radius: 999px;
            background: var(--color-success-soft);
            color: #15803d;
            font-size: 0.68rem;
            font-weight: 700;
        }

        #business-config-modal .business-subscription-card:is(.is-expiring, .is-expired) .business-subscription-badge {
            background: #fff7ed;
            color: #c2410c;
        }

        #business-config-modal .business-subscription-card.is-pending .business-subscription-badge {
            background: var(--color-surface-slate-2);
            color: var(--color-text-slate);
        }

        #business-config-modal .business-subscription-card.is-premium {
            border-color: #ddd6fe;
            background: #fbfaff;
        }

        #business-config-modal .business-subscription-card.is-premium .business-subscription-badge {
            background: #ede9fe;
            color: #6d28d9;
        }

        #business-config-modal .business-subscription-diamond {
            display: inline-block;
            margin-right: 3px;
            color: #7c3aed;
            font-size: 0.88em;
            transform: translateY(-1px);
        }

        #business-config-modal :is(.business-subscription-help, .business-subscription-notice) {
            margin: 10px 0 0;
            color: var(--color-text-muted);
            font-size: 0.76rem;
            line-height: 1.4;
        }

        #business-config-modal .business-subscription-notice {
            color: #c2410c;
            font-weight: 600;
        }

        #business-config-modal .business-subscription-renewal {
            display: grid;
            grid-template-columns: minmax(100px, 0.8fr) minmax(96px, 0.75fr) auto;
            align-items: end;
            gap: 10px;
            margin-top: 15px;
            padding-top: 14px;
            border-top: 1px solid var(--color-border-muted);
        }

        #business-config-modal .business-subscription-months {
            display: flex;
            min-width: 0;
            flex-direction: column;
            gap: 5px;
            color: var(--color-text-muted);
            font-size: 0.7rem;
            font-weight: 600;
        }

        #business-config-modal .business-subscription-months select {
            width: 100%;
            height: 38px;
            padding: 0 30px 0 10px;
            border: 1px solid var(--color-border-subtle);
            border-radius: 8px;
            background: var(--color-surface-base);
            color: var(--color-text-strong);
            font: inherit;
            font-size: 0.78rem;
            font-weight: 600;
        }

        #business-config-modal .business-subscription-months select:focus-visible {
            border-color: var(--accent-color, #ec4899);
            outline: 2px solid color-mix(in srgb, var(--accent-color, #ec4899) 24%, transparent);
            outline-offset: 1px;
        }

        #business-config-modal .business-subscription-total {
            display: inline-flex;
            min-height: 38px;
            align-items: center;
            color: var(--color-text-secondary);
            font-size: 0.76rem;
            font-weight: 650;
            white-space: nowrap;
        }

        #business-config-modal .business-subscription-pay {
            display: inline-flex;
            min-height: 38px;
            align-items: center;
            justify-content: center;
            gap: 7px;
            padding: 8px 13px;
            border: 1px solid var(--accent-color, #ec4899);
            border-radius: 8px;
            background: var(--accent-color, #ec4899);
            color: var(--color-white);
            font-size: 0.76rem;
            font-weight: 700;
            white-space: nowrap;
            cursor: pointer;
            transition: filter 0.18s ease, transform 0.18s ease;
        }

        #business-config-modal .business-subscription-pay svg {
            width: 16px;
            height: 16px;
            fill: currentColor;
        }

        #business-config-modal .business-subscription-pay:hover {
            filter: brightness(0.94);
            transform: translateY(-1px);
        }

        #business-config-modal .business-subscription-pay:focus-visible {
            outline: 2px solid var(--accent-color, #ec4899);
            outline-offset: 2px;
        }

        #business-config-modal .business-subscription-pay:disabled {
            opacity: 0.7;
            cursor: wait;
            transform: none;
        }

        #business-config-modal .business-subscription-pay.is-loading svg {
            animation: business-subscription-pulse 0.9s ease-in-out infinite alternate;
        }

        @keyframes business-subscription-pulse {
            to { opacity: 0.35; }
        }

        #business-config-modal .business-account-actions {
            display: grid;
            grid-template-columns: 1fr 1fr;
            margin-top: 14px;
            overflow: hidden;
            border: 1px solid var(--color-border-muted);
            border-radius: 10px;
            background: var(--color-surface-base);
        }

        #business-config-modal .business-account-action {
            display: inline-flex;
            min-height: 48px;
            align-items: center;
            justify-content: center;
            gap: 8px;
            padding: 10px 12px;
            color: var(--color-text-secondary);
            font-size: 0.77rem;
            font-weight: 650;
            text-align: center;
            text-decoration: none;
            transition: background-color 0.18s ease, color 0.18s ease;
        }

        #business-config-modal .business-account-action + .business-account-action {
            border-left: 1px solid var(--color-border-muted);
        }

        #business-config-modal .business-account-action svg {
            width: 18px;
            height: 18px;
            flex: 0 0 auto;
            fill: currentColor;
        }

        #business-config-modal .business-account-action.is-support {
            color: #15803d;
        }

        #business-config-modal .business-account-action.is-logout {
            color: var(--color-danger-strong);
        }

        #business-config-modal .business-account-action:hover {
            background: var(--color-surface-soft);
        }

        #business-config-modal .business-account-action:focus-visible {
            position: relative;
            z-index: 1;
            outline: 2px solid currentColor;
            outline-offset: -3px;
        }

        #business-config-modal.is-account-tab #save-business-config {
            display: none;
        }

        #business-config-modal.is-account-tab #cancel-business-config {
            flex: 1 1 100%;
        }

        @media (max-width: 480px) {
            #whatsapp-config-modal .config-tabs-header {
                padding-right: 12px;
                padding-left: 12px;
                gap: 0;
            }

            #whatsapp-config-modal .config-tab {
                padding-right: 4px;
                padding-left: 4px;
                font-size: 0.76rem;
            }

            #business-config-modal .business-status-strip {
                margin-right: 16px;
                margin-left: 16px;
            }

            #business-tabs-header {
                padding-right: 12px;
                padding-left: 12px;
                gap: 0;
            }

            #business-tabs-header .config-tab {
                padding-right: 4px;
                padding-left: 4px;
                font-size: 0.76rem;
            }

            #business-config-modal .business-subscription-renewal {
                grid-template-columns: 1fr auto;
            }

            #business-config-modal .business-subscription-total {
                justify-content: flex-end;
            }

            #business-config-modal .business-subscription-pay {
                grid-column: 1 / -1;
                width: 100%;
            }
        }
        
        /* ===== INDICADOR DE CATEGORÍA ACTIVA COMO TOOLTIP ===== */
        .active-category-tooltip {
            position: fixed;
            bottom: 56px; /* Justo arriba del menú inferior (72px + 13px) */
            left: 50%;
            transform: translateX(-50%);
            backdrop-filter: blur(10px);
            color: var(--color-white);
            padding: 6.2px 40px 20px 40px;
            border-radius: 9.2px;
            display: flex;
            align-items: center;
            gap: 6px;
            font-size: 12px;
            font-weight: 500;
            z-index: 1;
            transition: all 0.3s ease;
            white-space: nowrap;
            pointer-events: none;
        }
        
        /* Flecha hacia abajo apuntando al icono de categorías */
        .active-category-tooltip::after {
            content: '';
            position: absolute;
            top: 100%;
            left: 50%;
            transform: translateX(-50%);
            width: 0;
            height: 0;
            border-left: 6px solid transparent;
            border-right: 6px solid transparent;
        }
        
        .active-category-tooltip .category-icon {
            font-size: 14px;
            filter: drop-shadow(0 1px 2px rgba(0,0,0,0.3));
        }
        
        .active-category-tooltip .category-name {
            font-weight: 600;
            text-shadow: 0 1px 2px rgba(0,0,0,0.3);
            max-width: 120px;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        
        /* Animación de entrada */
        .active-category-tooltip.show {
            opacity: 1;
            transform: translateX(-50%) translateY(0);
        }
        
        .active-category-tooltip.hide {
            opacity: 0;
            transform: translateX(-50%) translateY(10px);
        }

        /* Chip categoría   activa (prop.): solo carrusel principal; en grilla no compite con :has + JS */
        body:has(.catalog-main.grid-mode) #active-category-indicator:not(.deleting) {
            display: none !important;
            visibility: hidden;
            pointer-events: none !important;
        }

        /* Cliente (varias categorías):  mismo criterio que el chip del propietario */
        body:has(.catalog-main.grid-mode) #client-category-indicator {
            display: none !important;
            visibility: hidden;
            pointer-events: none !important;
        }
        #tilde {
  color: var(--color-white) !important;
  fill: var(--color-white) !important;
}
        /* Responsive */
        @media (max-width: 768px) {
        /*    .active-category-tooltip {
                bottom: 80px; 
                font-size: 11px;
                padding: 5px 10px;
             } 
            */
            .active-category-tooltip .category-name {
                max-width: 100px;
            }
        }

        /* ===== PUNTOS DE RETIRO EN MODAL DE PEDIDO (LISTA SIMPLE) ===== */
        .pickup-points-list {
            margin-top: 8px;
        }
        

 

        .pickup-point-option {
            padding: 6px 2px 2px 0px;
                        margin-bottom: 4px;
            cursor: pointer;
            display: flex;
            align-items: flex-start;
            line-height: 1.3;
            max-width: 30px;
        }
        
        .pickup-point-option:hover .pickup-point-text {
            color: var(--color-info);
        }
        
        .pickup-point-option input[type="radio"] {
            margin-right: 8px;
            margin-top: 4px;
            flex-shrink: 0;
            min-width: 24px !important;
        }
        
        .pickup-point-text {
            flex: 1;
            font-size: 14px;
            color: var(--color-text-secondary);
            transition: color 0.2s ease;
            min-width: 197px;
        }
        
        .pickup-point-option.selected .pickup-point-text {
            color: #1f2937;
            font-weight: 500;
        }
        
        .no-pickup-points {
            text-align: center;
            padding: 12px;
            color: var(--color-text-muted);
            font-style: italic;
            font-size: 14px;
        }
        
        /* Versión móvil */
        @media (max-width: 768px) {
            .pickup-point-option {
                padding: 6px 242px 2px 0px;
                margin-bottom: 3px;
                max-width: 30px;
            }
            
            .pickup-point-text {
                font-size: 13px;
            }
            
            .pickup-point-option input[type="radio"] {
                margin-right: 8px;
                  min-width: 24px !important;
            }
        }

        /* ===== TOOLTIP SUTIL PARA CATEGORÍAS ===== */
        .categories-tooltip {
            position: fixed;
            z-index: 100;
            pointer-events: auto;
            cursor: pointer;
            animation: tooltipFadeIn 0.5s ease;
            transition: opacity 0.3s ease, transform 0.3s ease;
        }
        
        .categories-tooltip .tooltip-content {
            background: var(--color-info);
            color: var(--color-white);
            padding: 8px 12px;
            border-radius: 8px;
            font-size: 0.875rem;
            font-weight: 500;
            white-space: nowrap;
            box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
            position: relative;
        }
        
        .categories-tooltip .tooltip-arrow {
            position: absolute;
            bottom: -5px;
            left: 50%;
            transform: translateX(-50%);
            width: 0;
            height: 0;
            border-left: 6px solid transparent;
            border-right: 6px solid transparent;
            border-top: 6px solid var(--color-info);
        }
        
        .categories-tooltip:hover .tooltip-content {
            background: #2563eb;
            transform: scale(1.05);
        }
        
        .categories-tooltip:hover .tooltip-arrow {
            border-top-color: #2563eb;
        }
        
        .categories-tooltip.pulse .tooltip-content {
            animation: tooltipPulse 1s ease;
        }
        
        @keyframes tooltipFadeIn {
            from { 
                opacity: 0; 
                transform: translateY(10px);
            }
            to { 
                opacity: 1; 
                transform: translateY(0);
            }
        }
        
        @keyframes tooltipPulse {
            0%, 100% { 
                transform: scale(1); 
                box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
            }
            50% { 
                transform: scale(1.1); 
                box-shadow: 0 6px 20px rgba(59, 130, 246, 0.5);
            }
        }
        
        /* Responsive para móvil */
        @media (max-width: 768px) {
            .categories-tooltip .tooltip-content {
                font-size: 0.8rem;
                padding: 6px 10px;
            }
        }

        .modal-subtitle {
            margin: 0 0 24px 0;
            color: var(--color-text-muted);
            font-size: 0.875rem;
            line-height: 1.4;
        }
        
        .config-form {
            margin: 5px 0;
        }
        
        .config-group {
            margin-bottom: 20px;
        }

        .config-group label:not(.config-checkbox) {
            display: block;
            margin-bottom: 8px;
            font-weight: 500;
            color: var(--color-text-secondary);
            font-size: 0.875rem;
        }

        /* Estilos específicos para inputs de formulario (NO checkboxes) */
       
        
        .config-group input[type="tel"], .config-group input[type="text"],
        .config-group input[type="number"],
        .config-group input[type="email"],
        .config-group input[type="url"],
        .config-group input[type="file"],
        .config-group textarea {
            width: 100%;
            padding: 12px 16px;
            border: 2px solid var(--color-border-muted);
            border-radius: 8px;
            font-size: 0.875rem;
            transition: all 0.2s ease;
            background: var(--color-white);
            font-family: inherit;
        }

        .config-group input[type="text"]:focus,
        .config-group input[type="number"]:focus,
        .config-group input[type="email"]:focus,
        .config-group input[type="url"]:focus,
        .config-group input[type="file"]:focus,
        .config-group textarea:focus {
            outline: none;
            border-color: var(--color-success-strong);
            box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1);
        }


        .config-group input::placeholder {
            color: #9ca3af;
        }

        /* Selector de Color del Catálogo - Elegante */
        .accent-color-selector {
            display: flex;
            gap: 10px;
            flex-wrap: wrap;
        }
        
        .accent-color-btn {
            width: 28px;
            height: 28px;
            border-radius: 50%;
            border: 2px solid rgba(255, 255, 255, 0.9);
            cursor: pointer;
            transition: all 0.2s ease;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255,255,255,0.2);
        }
        
        .accent-color-btn:hover {
            transform: scale(1.15);
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
        }
        
        .accent-color-btn.selected {
            border-color: #1f2937;
            transform: scale(1.2);
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
        }
        
        .accent-color-btn svg {
            width: 12px;
            height: 12px;
            filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.3));
        }
        
        /* Selector de Estilo de Ícono */
        .catalog-theme-selector {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 10px;
        }

        #icon-style-selector {
            display: grid;
            gap: 14px;
            margin-top: 10px;
            padding: 14px;
            border: 1px solid var(--color-border-muted);
            border-radius: 12px;
            background: var(--color-surface-muted);
        }

        .marker-style-config-heading {
            margin-top: 18px;
        }

        .marker-style-config-heading .business-config-field-label {
            margin: 0;
            color: var(--color-text-strong);
        }

        .marker-style-config-heading small {
            display: block;
            margin-top: 3px;
            color: var(--color-text-muted);
            font-size: 0.76rem;
        }

        .icon-style-option-group {
            min-width: 0;
        }

        .icon-style-option-group .business-config-field-heading {
            margin-top: 0 !important;
        }

        .icon-style-option-group--bar {
            padding-top: 0;
            border-top: 0;
        }

        .icon-style-option-row {
            display: flex;
            flex-wrap: wrap;
            gap: 12px;
            margin-top: 8px;
        }
        
        .icon-style-btn {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 10px 14px;
            border: 2px solid var(--color-border-muted);
            border-radius: 100px;
            background: #fff;
            cursor: pointer;
            transition: all 0.2s ease;
            font-size: 0.8rem;
            color: var(--color-text-secondary);
        }
        
        .icon-style-btn:hover {
            border-color: #9ca3af;
            background: var(--color-surface-muted);
        }
        
        .icon-style-btn.selected {
            border-color: var(--accent-color);
            background:rgb(255, 255, 255);
        }
        .icon-style-btn.selected svg {
            
            color:rgb(255, 255, 255) !important;
        }
        .icon-style-preview {
            width: 24px;
            height: 24px;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .icon-style-preview.cart-preview  {
           border-radius: 50%;
        }
         
        .icon-style-preview.cart-preview svg {
            width: 14px;
            height: 14px;
            fill: var(--color-white);
        }
        
        .icon-style-preview.dot-preview {
            position: relative;
        }
        
        .icon-style-preview.dot-preview::before {
            content: '';
            width: 10px;
            height: 10px;
            background: var(--color-white);
            border-radius: 50%;
            border: 3px solid #4CAF50;
            box-shadow: 0 1px 3px rgba(0,0,0,0.2);
        }

        .icon-style-preview.classic-preview {
            width: 28px;
        }

        .icon-style-preview.classic-preview span {
            display: block;
            width: 26px;
            height: 14px;
            border: 2px solid var(--accent-color, #4CAF50);
            border-radius: 4px;
            background: transparent;
            position: relative;
        }

        .icon-style-preview.classic-preview span::after {
            content: '';
            position: absolute;
            top: 50%;
            left: 5px;
            right: 5px;
            height: 2px;
            border-radius: 2px;
            background: var(--accent-color, #4CAF50);
            transform: translateY(-50%);
        }
        
        /* Punto Elegante - Estilo alternativo al carrito */
        .product-zone.dot-style .product-cart-icon {
            width: 16px !important;
            height: 16px !important;
            background: var(--color-white) !important;
            border: 3px solid var(--accent-color, #4CAF50) !important;
            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2) !important;
        }
        
        /* Animación de pulso para el punto */
        .product-zone.dot-style .product-cart-icon::before {
            content: '' !important;
            display: block !important;
            position: absolute !important;
            top: 50% !important;
            left: 50% !important;
            width: 16px !important;
            height: 16px !important;
            border-radius: 50% !important;
            background: transparent !important;
            border: 2px solid var(--accent-color, #4CAF50) !important;
            transform: translate(-50%, -50%) scale(1) !important;
            animation: dotPulse 2s ease-out infinite !important;
            z-index: -1 !important;
            pointer-events: none !important;
        }
        
        @keyframes dotPulse {
            0% {
                transform: translate(-50%, -50%) scale(1);
                opacity: 0.8;
            }
            100% {
                transform: translate(-50%, -50%) scale(2.5);
                opacity: 0;
            }
        }
        
        .product-zone.dot-style .product-cart-icon svg {
            display: none !important;
        }
        
        .product-zone.dot-style.has-items .product-cart-icon {
            background: var(--accent-color, #4CAF50) !important;
            border-color: var(--color-white) !important;
        }
        
        .product-zone.dot-style.has-items .product-cart-icon::before {
            border-color: var(--accent-color, #4CAF50) !important;
        }

        .product-zone.is-flipped.dot-style .product-cart-icon {
            left: auto !important;
            right: 6px !important;
        }

        /* Estilo especial para campo de precio */
        .price-input-container {
            position: relative;
        }

        .price-input-container::before {
            content: '$';
            position: absolute;
            left: 16px;
            top: 50%;
            transform: translateY(-50%);
            color: var(--color-text-muted);
            font-weight: 500;
            z-index: 1;
        }

        .price-input-container input {
            padding-left: 32px !important;
        }

        /* Botones del modal */
        .modal-buttons {
            display: flex;
            gap: 12px;
            margin-top: 24px;
        }

        .modal-btn {
            flex: 1;
            padding: 12px 20px;
            border: none;
            border-radius: 8px;
            font-weight: 500;
            font-size: 0.875rem;
            cursor: pointer;
            transition: all 0.2s ease;
        }

        .modal-btn.primary {
            background: var(--color-success-strong);
            color: var(--color-white);
        }

        .modal-btn.primary:hover {
            background: #059669;
            transform: translateY(-1px);
        }

        .modal-btn.secondary {
            background: var(--color-border-soft);
            color: var(--color-text-secondary);
        }

        .modal-btn.secondary:hover {
            background: var(--color-border-muted);
        }

        /* ===== MODAL DE PRODUCTO - 5 PASOS POSIBLES ===== */
        .product-modal-steps {
            overflow: hidden;
        }

        /* Creador de producto Default: cabecera y acciones estables, con un
           único cuerpo desplazable. Negro y Matrix conservan su estructura. */
        body:not(.theme-negro):not(.theme-matrix) #product-modal .pm-product-modal-shell {
            display: flex;
            flex-direction: column;
            width: min(94vw, 440px) !important;
            height: min(720px, calc(100dvh - 32px));
            max-height: calc(100dvh - 32px) !important;
            padding: 0 !important;
            overflow: hidden !important;
            box-sizing: border-box;
        }

        body:not(.theme-negro):not(.theme-matrix) #product-modal .pm-product-modal-header {
            flex: 0 0 auto;
            min-height: 68px;
            margin: 0 !important;
            padding: 19px 24px 16px;
            border-bottom: 1px solid #e5e7eb;
            background: var(--color-white);
            box-sizing: border-box;
        }

        body:not(.theme-negro):not(.theme-matrix) #product-modal .pm-product-modal-header h3 {
            color: #111827;
            font-size: 20px;
            font-weight: 700;
            letter-spacing: -0.015em;
        }

        #product-modal .pm-product-modal-close {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 32px;
            height: 32px;
            padding: 0;
            border: 0;
            border-radius: 50%;
            background: transparent;
            color: #8b94a3;
            cursor: pointer;
        }

        #product-modal .pm-product-modal-close:hover,
        #product-modal .pm-product-modal-close:focus-visible {
            background: #f3f4f6;
            color: #374151;
            outline: none;
        }

        #product-modal .pm-product-modal-close svg {
            width: 17px;
            height: 17px;
            fill: none;
            stroke: currentColor;
            stroke-width: 2;
            stroke-linecap: round;
        }

        body:not(.theme-negro):not(.theme-matrix) #product-modal .pm-product-container-active {
            display: flex !important;
            flex: 1 1 auto;
            flex-direction: column;
            min-height: 0;
            overflow: hidden;
        }

        body:not(.theme-negro):not(.theme-matrix) #product-modal .product-modal-steps,
        body:not(.theme-negro):not(.theme-matrix) #product-modal .product-modal-steps-wrapper {
            height: 100%;
            min-height: 0;
        }

        body:not(.theme-negro):not(.theme-matrix) #product-modal .product-modal-step {
            display: flex;
            flex-direction: column;
            height: 100%;
            min-height: 0;
            padding: 0 24px;
            box-sizing: border-box;
        }

        body:not(.theme-negro):not(.theme-matrix) #product-modal .product-modal-step-content,
        body:not(.theme-negro):not(.theme-matrix) #product-modal .pm-product-container-active > .product-modal-step-content {
            flex: 1 1 auto;
            min-height: 0;
            max-height: none !important;
            padding: 20px 6px 20px 0 !important;
            overflow-x: hidden;
            overflow-y: auto !important;
            overscroll-behavior: contain;
            scrollbar-gutter: stable;
            scrollbar-width: thin;
            scrollbar-color: #a3a3a3 transparent;
            box-sizing: border-box;
        }

        body:not(.theme-negro):not(.theme-matrix) #product-modal .product-modal-step-content::-webkit-scrollbar,
        body:not(.theme-negro):not(.theme-matrix) #product-modal .pm-product-container-active > .product-modal-step-content::-webkit-scrollbar {
            width: 6px;
        }

        body:not(.theme-negro):not(.theme-matrix) #product-modal .product-modal-step-content::-webkit-scrollbar-thumb,
        body:not(.theme-negro):not(.theme-matrix) #product-modal .pm-product-container-active > .product-modal-step-content::-webkit-scrollbar-thumb {
            border-radius: 999px;
            background: #a3a3a3;
        }

        body:not(.theme-negro):not(.theme-matrix) #product-modal .step-footer {
            position: static;
            z-index: 2;
            flex: 0 0 auto;
            margin: 0;
            padding: 14px 0 18px;
            border-top: 1px solid #e5e7eb;
            background: var(--color-white);
        }

        body:not(.theme-negro):not(.theme-matrix) #product-modal .pm-product-container-active > .step-footer {
            margin: 0 24px;
        }

        /* Enlace externo: usa el mismo cuerpo desplazable del creador. Antes
           conservaba un alto propio que comprimía la última sección contra
           el footer en pantallas bajas. */
        #product-modal .pm-external-product-container {
            min-height: 0;
        }

        #product-modal #pm-external-container > .pm-external-product-content {
            max-height: none;
            padding: 16px 18px 16px 24px !important;
        }

        #product-modal #pm-external-container > .pm-external-product-content > .config-group:last-child {
            margin-bottom: 0;
        }

        #product-modal #pm-external-container .section-title {
            margin-top: 0;
            margin-bottom: 6px;
        }

        #product-modal #pm-external-container .section-subtitle {
            margin-bottom: 10px;
        }

        #product-modal #pm-external-container .config-group {
            margin-bottom: 10px;
        }

        #product-modal #pm-external-container .config-group label:not(.config-checkbox) {
            margin-bottom: 4px;
        }

        #product-modal #pm-external-container .config-group :is(
            input[type="text"],
            input[type="number"],
            input[type="url"],
            textarea
        ) {
            padding: 9px 12px;
        }

        #product-modal #pm-external-container .field-hint {
            margin-top: 3px;
            line-height: 1.35;
        }

        #product-modal #pm-external-container textarea {
            min-height: 56px;
        }

        #product-modal #pm-external-container .pm-gallery-add-btn {
            padding: 9px 14px;
        }

        body:not(.theme-negro):not(.theme-matrix) #product-modal .type-options {
            gap: 9px;
        }

        body:not(.theme-negro):not(.theme-matrix) #product-modal .type-option {
            padding: 12px 13px;
            border-width: 1.5px;
            border-radius: 12px;
        }

        body:not(.theme-negro):not(.theme-matrix) #product-modal .type-option-header {
            align-items: flex-start;
            gap: 10px;
        }

        body:not(.theme-negro):not(.theme-matrix) #product-modal .type-option-radio {
            margin-top: 5px;
        }

        body:not(.theme-negro):not(.theme-matrix) #product-modal .type-option-icon {
            width: 30px;
            height: 30px;
            flex: 0 0 30px;
            border-radius: 9px;
            background: #f3f4f6;
        }

        body:not(.theme-negro):not(.theme-matrix) #product-modal .type-option.selected .type-option-icon {
            background: #dff2f7;
        }

        body:not(.theme-negro):not(.theme-matrix) #product-modal .type-option-icon svg {
            width: 17px;
            height: 17px;
        }

        body:not(.theme-negro):not(.theme-matrix) #product-modal .type-option-text h4 {
            font-size: 14px;
            line-height: 1.35;
        }

        body:not(.theme-negro):not(.theme-matrix) #product-modal .type-option-text p {
            font-size: 12px;
            line-height: 1.4;
        }

        body:not(.theme-negro):not(.theme-matrix) #product-modal .type-config {
            margin: 9px 0 0 58px;
            padding: 0;
            border: 0;
        }

        body:not(.theme-negro):not(.theme-matrix) #product-modal .option-intro {
            padding: 8px 10px;
            border-color: #d9e4e8;
            background: #f5f8f9;
            color: #536471;
            font-size: 11.5px;
            line-height: 1.45;
        }

        body:not(.theme-negro):not(.theme-matrix) #product-modal .option-intro em {
            color: inherit;
        }

        @media (max-width: 600px) {
            body:not(.theme-negro):not(.theme-matrix) #product-modal {
                align-items: center;
                padding: 6px;
                box-sizing: border-box;
            }

            body:not(.theme-negro):not(.theme-matrix) #product-modal .pm-product-modal-shell {
                width: calc(100vw - 12px) !important;
                height: calc(100dvh - 12px);
                max-height: calc(100dvh - 12px) !important;
                border-radius: 18px;
            }

            body:not(.theme-negro):not(.theme-matrix) #product-modal .pm-product-modal-header {
                min-height: 62px;
                padding: 16px 18px 13px;
            }

            body:not(.theme-negro):not(.theme-matrix) #product-modal .product-modal-step {
                padding: 0 18px;
            }

            body:not(.theme-negro):not(.theme-matrix) #product-modal .pm-product-container-active > .step-footer {
                margin: 0 18px;
            }
        }
        
        .product-modal-steps-wrapper {
            display: flex;
            width: 600%;
            transition: transform 0.3s ease;
        }
        
        .product-modal-step {
            width: calc(100% / 6);
            flex-shrink: 0;
            padding: 0 4px;
        }
        
        .product-modal-steps-wrapper.step-1 {
            transform: translateX(0);
        }
        .product-modal-steps-wrapper.step-2 {
            transform: translateX(calc(-100% / 6));
        }
        .product-modal-steps-wrapper.step-3 {
            transform: translateX(calc(-200% / 6));
        }
        .product-modal-steps-wrapper.step-4 {
            transform: translateX(calc(-300% / 6));
        }
        .product-modal-steps-wrapper.step-5 {
            transform: translateX(calc(-400% / 6));
        }
        .product-modal-steps-wrapper.step-6 {
            transform: translateX(calc(-500% / 6));
        }

        /* Con opciones: tipo + recorrido guiado. Los pasos usan los mismos
           controles reales; solamente cambia su organización visual. */
        #product-steps-wrapper.pm-guided-variants {
            width: 800%;
        }

        #product-steps-wrapper.pm-guided-variants .product-modal-step {
            width: 12.5%;
        }

        #product-steps-wrapper.pm-guided-variants.step-1 { transform: translateX(0); }
        #product-steps-wrapper.pm-guided-variants.step-2 { transform: translateX(-12.5%); }
        #product-steps-wrapper.pm-guided-variants.step-3 { transform: translateX(-25%); }
        #product-steps-wrapper.pm-guided-variants.step-4 { transform: translateX(-37.5%); }
        #product-steps-wrapper.pm-guided-variants.step-5 { transform: translateX(-50%); }
        #product-steps-wrapper.pm-guided-variants.step-6 { transform: translateX(-62.5%); }
        #product-steps-wrapper.pm-guided-variants.step-7 { transform: translateX(-75%); }
        #product-steps-wrapper.pm-guided-variants.step-8 { transform: translateX(-87.5%); }

        #product-modal #product-steps-wrapper.pm-guided-variants .product-modal-step-content {
            max-height: none !important;
            overflow-y: auto;
            padding-right: 12px;
        }

        #product-modal .pm-guided-fork-recap {
            display: grid;
            gap: 7px;
            margin: 18px 0;
            padding: 14px;
            border: 1px solid #dfe3ea;
            border-radius: 12px;
            background: #f8fafc;
        }

        #product-modal .pm-guided-fork-recap small {
            color: #64748b;
            font-size: 11px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: .04em;
        }

        #product-modal .pm-guided-fork-recap > strong {
            color: #111827;
            font-size: 14px;
        }

        #product-modal .pm-guided-fork-recap > div {
            display: flex;
            flex-wrap: wrap;
            gap: 7px;
        }

        #product-modal .pm-guided-fork-recap > div > span {
            display: inline-flex;
            align-items: center;
            gap: 5px;
            min-height: 30px;
            padding: 6px 9px;
            border: 1px solid #d7dce4;
            border-radius: 999px;
            background: #fff;
            color: #334155;
            font-size: 11px;
        }

        #product-modal .pm-guided-fork-actions {
            display: grid;
            gap: 10px;
        }

        #product-modal .pm-guided-fork-card {
            display: grid;
            grid-template-columns: 1fr;
            gap: 4px;
            width: 100%;
            padding: 14px;
            border: 1px solid #d7dce4;
            border-radius: 12px;
            background: #fff;
            color: #111827;
            text-align: left;
            cursor: pointer;
            transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
        }

        #product-modal .pm-guided-fork-card:hover,
        #product-modal .pm-guided-fork-card:focus-visible {
            border-color: var(--accent-color, #22c55e);
            background: color-mix(in srgb, var(--accent-color, #22c55e) 5%, #fff);
            box-shadow: 0 0 0 1px var(--accent-color, #22c55e);
            outline: none;
        }

        #product-modal .pm-guided-fork-card strong {
            font-size: 13px;
        }

        #product-modal .pm-guided-fork-card span {
            color: #64748b;
            font-size: 11px;
            line-height: 1.4;
        }

        #product-modal .pm-guided-single-footer .modal-btn {
            flex: 1;
        }

        .pm-choice-builder,
        .pm-condensed-availability {
            border: 1px solid #e2e8f0;
            border-radius: 12px;
            padding: 14px;
            margin-top: 14px;
            background: #fff;
        }

        .pm-choice-builder-heading,
        .pm-second-choice-prompt {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
        }

        .pm-choice-builder-heading {
            margin-bottom: 12px;
        }

        .pm-choice-builder-heading > div,
        .pm-second-choice-prompt > div {
            display: grid;
            gap: 3px;
        }

        .pm-choice-builder-heading span,
        .pm-second-choice-prompt span {
            color: #64748b;
            font-size: 12px;
            line-height: 1.35;
        }

        .pm-choice-builder-heading button,
        .pm-second-choice-prompt button {
            border: 1px solid #cbd5e1;
            border-radius: 9px;
            background: #fff;
            color: #334155;
            font: inherit;
            font-size: 12px;
            font-weight: 700;
            padding: 8px 10px;
            cursor: pointer;
            flex: 0 0 auto;
        }

        .pm-second-choice-prompt {
            border: 1px dashed #cbd5e1;
            border-radius: 12px;
            padding: 14px;
            margin-top: 14px;
            background: #f8fafc;
        }

        .pm-second-choice-prompt button {
            color: #0284c7;
            border-color: #7dd3fc;
        }

        .pm-choice-builder[hidden],
        .pm-second-choice-prompt[hidden] {
            display: none !important;
        }

        .pm-condensed-availability > .section-title {
            margin-top: 0;
        }

        .pm-single-availability {
            display: grid;
            gap: 8px;
            margin-top: 10px;
        }

        .pm-single-availability button {
            display: flex;
            align-items: center;
            justify-content: space-between;
            width: 100%;
            border: 1px solid #86efac;
            border-radius: 9px;
            background: #f0fdf4;
            color: #166534;
            padding: 10px 12px;
            font: inherit;
            cursor: pointer;
        }

        .pm-single-availability button.is-unavailable {
            border-color: #cbd5e1;
            background: #f8fafc;
            color: #64748b;
            text-decoration: line-through;
        }

        @media (max-width: 520px) {
            .pm-choice-builder,
            .pm-condensed-availability,
            .pm-second-choice-prompt {
                padding: 12px;
            }

            .pm-choice-builder-heading,
            .pm-second-choice-prompt {
                align-items: flex-start;
                flex-direction: column;
            }

            .pm-choice-builder-heading button,
            .pm-second-choice-prompt button {
                width: 100%;
            }
        }
        
        /* Contenedores Simple y Quote: 2 pasos */
        #simple-steps-wrapper,
        #quote-steps-wrapper {
            width: 200%;
        }
        #simple-steps-wrapper .product-modal-step,
        #quote-steps-wrapper .product-modal-step {
            width: 50%;
        }
        #simple-steps-wrapper.step-1,
        #quote-steps-wrapper.step-1 {
            transform: translateX(0);
        }
        #simple-steps-wrapper.step-2,
        #quote-steps-wrapper.step-2 {
            transform: translateX(-50%);
        }

        #simple-steps-wrapper.pm-guided-simple {
            width: 400%;
        }

        #simple-steps-wrapper.pm-guided-simple .product-modal-step {
            width: 25%;
        }

        #simple-steps-wrapper.pm-guided-simple.step-1 { transform: translateX(0); }
        #simple-steps-wrapper.pm-guided-simple.step-2 { transform: translateX(-25%); }
        #simple-steps-wrapper.pm-guided-simple.step-3 { transform: translateX(-50%); }
        #simple-steps-wrapper.pm-guided-simple.step-4 { transform: translateX(-75%); }
        
        .product-modal-step-content {
            padding: 20px 10px 20px 0px;
        }
        
        /* Hint de campo */
        .field-hint {
            font-size: 12px;
            color: #888;
            margin-top: 6px;
        }
        
        .optional-label {
            color: #999;
            font-weight: 400;
        }
        
        /* Sección de tipo de producto */
        .section-title {
            font-size: 13px;
            font-weight: 600;
            color: #555;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            margin-bottom: 12px;
        }
        
        .section-subtitle {
            font-size: 13px;
            color: #888;
            margin-bottom: 14px;
            font-weight: 400;
        }
        
        /* Opciones de tipo de producto */
        .type-options {
            display: flex;
            flex-direction: column;
            gap: 10px;
        }
        
        .type-option {
            border: 2px solid #e8e8e8;
            border-radius: 10px;
            padding: 14px 16px;
            cursor: pointer;
            transition: all 0.2s;
            background: var(--color-white);
        }
        
        .type-option:hover {
            border-color: #c5d8fc;
            background: #f8faff;
        }
        
        .type-option.selected {
            border-color: #4A90A4;
            background: #f0f7fa;
        }
        
        .type-option-header {
            display: flex;
            align-items: center;
            gap: 10px;
        }
        
        .type-option-radio {
            width: 18px;
            height: 18px;
            border: 2px solid #ccc;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
        }
        
        .type-option.selected .type-option-radio {
            border-color: #4A90A4;
            background: #4A90A4;
        }
        
        .type-option.selected .type-option-radio::after {
            content: '';
            width: 6px;
            height: 6px;
            background: var(--color-white);
            border-radius: 50%;
        }
        
        .type-option-icon {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 36px;
            height: 36px;
            color: var(--color-text-muted);
        }
        
        .type-option.selected .type-option-icon {
            color: var(--accent-color, #0d9488);
        }
        
        .type-option-text {
            flex: 1;
        }
        
        .type-option-text h4 {
            font-size: 14px;
            font-weight: 600;
            color: #333;
            margin: 0 0 2px 0;
        }
        
        .type-option.selected .type-option-text h4 {
            color: #4A90A4;
        }
        
        .type-option-text p {
            font-size: 12px;
            color: #888;
            margin: 0;
        }
        
        /* Config expandible */
        .type-config {
            margin-top: 14px;
            padding-top: 14px;
            border-top: 1px dashed #ddd;
            display: none;
        }
        
        .type-option.selected .type-config {
            display: block;
        }
        
        /* Tags de variantes */
        .variant-tags {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            min-height: 44px;
            padding: 12px;
            background: #f9f9f9;
            border-radius: 8px;
            margin-bottom: 10px;
            align-items: center;
        }
        
        .variant-tags.empty::before {
            content: 'No hay opciones agregadas aún';
            color: #999;
            font-size: 13px;
        }
        
        .variant-tag {
            background: var(--color-white);
            border: 1px solid #ddd;
            padding: 8px 12px;
            border-radius: 8px;
            font-size: 14px;
            font-weight: 500;
            display: flex;
            align-items: center;
            gap: 8px;
        }
        
        .variant-tag .remove {
            width: 18px;
            height: 18px;
            background: #ff5252;
            color: var(--color-white);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 11px;
            cursor: pointer;
            border: none;
            padding: 0;
            line-height: 1;
        }
        
        .variant-tag .remove:hover {
            background: #d32f2f;
        }
        
        /* Input agregar variante */
        .add-variant-row {
            display: flex;
            gap: 8px;
        }
        
        .add-variant-row input {
            flex: 1;
            padding: 10px 12px;
            border: 1px solid #ddd;
            border-radius: 8px;
            font-size: 14px;
        }
        
        .add-variant-row input:focus {
            outline: none;
            border-color: #4A90A4;
        }

        .add-variant-row.pm-pending-option-highlight {
            animation: pmPendingOptionHighlight 1.15s ease both;
            border-radius: 10px;
        }

        @keyframes pmPendingOptionHighlight {
            0%, 100% { box-shadow: 0 0 0 0 rgba(245, 158, 11, 0); }
            22%, 72% { box-shadow: 0 0 0 4px rgba(245, 158, 11, .22); }
        }
          
        .pm-option-manual-hint {
            margin: 6px 2px 12px;
            padding: 0;
            border: 0;
            background: transparent;
            color: var(--color-text-muted, #6b7280);
            font-size: 12px;
            line-height: 1.45;
        }
        
        .btn-add-variant {
            padding: 10px 16px;
            background: #4A90A4;
            color: var(--color-white);
            border: none;
            border-radius: 8px;
            font-size: 13px;
            font-weight: 600;
            cursor: pointer;
            white-space: nowrap;
        }
        
        .btn-add-variant:hover {
            background: #3d7a8c;
        }
        
        /* Pills rápidos */
        .quick-add {
            display: flex;
            gap: 8px;
            margin-top: 10px;
            flex-wrap: wrap;
        }
        
        .quick-pill {
            padding: 6px 12px;
            background: #e3f2fd;
            border: 1px solid #90caf9;
            border-radius: 16px;
            font-size: 12px;
            color: #1976D2;
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 4px;
        }
        
        .quick-pill:hover {
            background: #bbdefb;
        }
        
        /* Color hint */
        .color-hint {
            font-size: 12px;
            color: #888;
            margin-top: 10px;
            font-style: italic;
        }
        
        /* ========== MINI-CARRUSEL DE OPCIONES (3 pasos internos) ========== */
        .variant-steps-container {
            overflow: hidden;
            position: relative;
        }
        
        .variant-steps-wrapper {
            display: flex;
            transition: transform 0.3s ease;
            width: 300%;
        }
        
        .variant-steps-wrapper.step-2 {
            transform: translateX(-33.33%);
        }
        
        .variant-steps-wrapper.step-3 {
            transform: translateX(-66.66%);
        }
        
        .variant-step {
            width: 33.33%;
            flex-shrink: 0;
            padding: 0 2px;
        }
        
        /* Indicador de progreso (3 puntitos) */
        .option-progress {
            display: flex;
            justify-content: center;
            gap: 8px;
            margin-bottom: 16px;
        }
        
        .option-progress-dot {
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background: #e5e5e5;
            transition: all 0.3s;
        }
        
        .option-progress-dot.completed {
            background: var(--color-success-strong);
        }
        
        .option-progress-dot.active {
            background: #4A90A4;
            transform: scale(1.2);
        }
        
        /* Explicación inicial */
        .option-intro {
            background: #f0f9ff;
            border: 1px solid #bae6fd;
            border-radius: 8px;
            padding: 12px;
            margin-bottom: 16px;
            font-size: 13px;
            color: #0369a1;
            line-height: 1.5;
        }
        
        .option-intro em {
            color: #0284c7;
            font-style: italic;
        }
        
        /* Dropdown de tipo de opción */
        .option-type-select {
            width: 100%;
            padding: 12px 14px;
            border: 1.5px solid #ddd;
            border-radius: 8px;
            font-size: 14px;
            color: #333;
            background: var(--color-white);
            cursor: pointer;
            margin-bottom: 12px;
            appearance: none;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23666' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
            background-repeat: no-repeat;
            background-position: right 12px center;
        }
        
        .option-type-select:focus {
            outline: none;
            border-color: #4A90A4;
        }
        
        /* Pills dinámicos */
        .option-pills {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            margin-bottom: 12px;
        }
        
        .option-pill {
            padding: 8px 14px;
            background: #e0f2fe;
            border: 1px solid #7dd3fc;
            border-radius: 20px;
            font-size: 13px;
            color: #0369a1;
            cursor: pointer;
            transition: all 0.2s;
        }
        
        .option-pill:hover {
            background: #bae6fd;
            border-color: #38bdf8;
        }
        
        .option-pill.added {
            background: #d1fae5;
            border-color: #6ee7b7;
            color: #065f46;
        }
        
        /* Aviso sin opciones */
        .option-empty-warning {
            background: #fef3c7;
            border: 1px solid #fcd34d;
            border-radius: 8px;
            padding: 14px;
            margin: 12px 0;
            text-align: center;
        }
        
        .option-empty-warning p {
            font-size: 13px;
            color: #92400e;
            margin: 0 0 12px 0;
        }
        
        .option-empty-warning-btns {
            display: flex;
            gap: 8px;
            justify-content: center;
        }
        
        .option-empty-warning-btns button {
            padding: 8px 16px;
            border-radius: 6px;
            font-size: 13px;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.2s;
        }
        
        .btn-add-options {
            background: #4A90A4;
            color: var(--color-white);
            border: none;
        }
        
        .btn-add-options:hover {
            background: #3d7a8c;
        }
        
        .btn-skip-options {
            background: var(--color-white);
            color: #666;
            border: 1px solid #ddd;
        }
        
        .btn-skip-options:hover {
            background: #f5f5f5;
        }
        
        /* Matriz de disponibilidad */
        .availability-matrix {
            margin-top: 12px;
        }
        
        .availability-matrix-title {
            font-size: 14px;
            font-weight: 600;
            color: #333;
            margin-bottom: 8px;
        }
        
        .availability-matrix-hint {
            font-size: 12px;
            color: #666;
            margin-bottom: 12px;
        }
        
        .availability-grid {
            display: grid;
            gap: 2px;
            background: #e5e5e5;
            border-radius: 8px;
            overflow: hidden;
            font-size: 12px;
        }
        
        .availability-header {
            display: contents;
        }
        
        .availability-header-cell {
            background: #f5f5f5;
            padding: 10px 8px;
            text-align: center;
            font-weight: 600;
            color: #333;
        }
        
        .availability-row {
            display: contents;
        }
        
        .availability-row-label {
            background: #f5f5f5;
            padding: 10px 12px;
            font-weight: 500;
            color: #333;
            display: flex;
            align-items: center;
        }
        
        .availability-cell {
            background: var(--color-white);
            padding: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all 0.2s;
        }
        
        .availability-cell:hover {
            background: #f0f9ff;
        }
        
        .availability-cell.active {
            background: #d1fae5;
        }
        
        .availability-cell.inactive {
            background: #fee2e2;
        }
        
        .availability-check {
            width: 24px;
            height: 24px;
            border-radius: 6px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 14px;
            transition: all 0.2s;
        }
        
        .availability-cell.active .availability-check {
            background: var(--color-success-strong);
            color: var(--color-white);
        }
        
        .availability-cell.inactive .availability-check {
            background: var(--color-danger);
            color: var(--color-white);
        }
        
        /* Mensaje sin matriz (solo 1 opción) */
        .no-matrix-message {
            background: #d1fae5;
            border: 1px solid #6ee7b7;
            border-radius: 8px;
            padding: 16px;
            text-align: center;
            color: #065f46;
            font-size: 14px;
        }
        
        /* Navegación entre pasos de opciones */
        .option-nav {
            display: flex;
            gap: 10px;
            margin-top: 16px;
        }
        
        .option-nav button {
            flex: 1;
            padding: 14px 20px;
            border-radius: 10px;
            font-size: 14px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.2s;
        }
        
        .btn-option-back {
            background: var(--color-white);
            border: 1.5px solid #ddd;
            color: #666;
        }
        
        .btn-option-back:hover {
            background: #f5f5f5;
            border-color: #ccc;
        }
        
        .btn-option-next {
            background: linear-gradient(135deg, #4A90A4 0%, #357a8c 100%);
            border: none;
            color: var(--color-white);
        }
        
        .btn-option-next:hover {
            transform: translateY(-1px);
            box-shadow: 0 4px 12px rgba(74, 144, 164, 0.3);
        }
        
        .btn-option-confirm {
            background: linear-gradient(135deg, var(--color-success-strong) 0%, #059669 100%);
            border: none;
            color: var(--color-white);
        }
        
        .btn-option-confirm:hover {
            transform: translateY(-1px);
            box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
        }
        
        /* Ejemplos de variantes */
        .variant-examples {
            background: #f0f9ff;
            border: 1px solid #bae6fd;
            border-radius: 8px;
            padding: 12px;
            margin: 12px 0;
        }
        
        .variant-examples p {
            font-size: 12px;
            color: #0369a1;
            margin: 0 0 6px 0;
            line-height: 1.4;
        }
        
        .variant-examples p:last-child {
            margin-bottom: 0;
        }
        
        .variant-examples .color-highlight {
            background: #fef3c7;
            border-radius: 4px;
            padding: 6px 8px;
            margin-top: 8px;
            color: #92400e;
            font-weight: 500;
        }
        
        /* Botón continuar (paso 1 → 2) */
        .btn-variant-next {
            width: 100%;
            padding: 14px 20px;
            background: linear-gradient(135deg, #4A90A4 0%, #357a8c 100%);
            color: var(--color-white);
            border: none;
            border-radius: 10px;
            font-size: 15px;
            font-weight: 600;
            cursor: pointer;
            margin-top: 12px;
            transition: all 0.2s;
        }
        
        .btn-variant-next:hover {
            transform: translateY(-1px);
            box-shadow: 0 4px 12px rgba(74, 144, 164, 0.3);
        }
        
        .btn-variant-next:disabled {
            background: #ccc;
            cursor: not-allowed;
            transform: none;
            box-shadow: none;
        }
        
        /* Resumen de variantes confirmadas */
        .variant-confirmed-summary {
            display: flex;
            align-items: center;
            gap: 10px;
            background: #ecfdf5;
            border: 1px solid #6ee7b7;
            border-radius: 8px;
            padding: 12px;
            margin-bottom: 14px;
        }
        
        .variant-confirmed-summary .variant-check {
            width: 24px;
            height: 24px;
            background: var(--color-success-strong);
            color: var(--color-white);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 14px;
            flex-shrink: 0;
        }
        
        .variant-confirmed-summary #variant-summary-text {
            flex: 1;
            font-size: 13px;
            color: #065f46;
            font-weight: 500;
        }
        
        .btn-edit-variants {
            padding: 6px 12px;
            background: transparent;
            border: 1px solid var(--color-success-strong);
            color: var(--color-success-strong);
            border-radius: 6px;
            font-size: 12px;
            cursor: pointer;
            transition: all 0.2s;
        }
        
        .btn-edit-variants:hover {
            background: var(--color-success-strong);
            color: var(--color-white);
        }
        
        /* Botón confirmar (paso 2) */
        .btn-variant-confirm {
            width: 100%;
            padding: 14px 20px;
            background: linear-gradient(135deg, var(--color-success-strong) 0%, #059669 100%);
            color: var(--color-white);
            border: none;
            border-radius: 10px;
            font-size: 15px;
            font-weight: 600;
            cursor: pointer;
            margin-top: 14px;
            transition: all 0.2s;
        }
        
        .btn-variant-confirm:hover {
            transform: translateY(-1px);
            box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
        }
        
        /* Estado confirmado del botón */
        .btn-variant-confirm.confirmed {
            background: linear-gradient(135deg, #065f46 0%, #047857 100%);
            pointer-events: none;
            opacity: 0.9;
        }
        
        .btn-variant-confirm.confirmed::before {
            content: '✓ ';
        }
        
        /* Ocultar tags en paso 1 cuando está vacío - mostrar después del input */
        .variant-step .variant-tags {
            margin-top: 10px;
            margin-bottom: 0;
        }
        
        .variant-step .variant-tags.empty {
            display: none;
        }
        
        /* Mensaje "No tiene opciones asignadas" */
        .no-variants-message {
            background: #fef3c7;
            border: 1px dashed var(--color-warning);
            border-radius: 8px;
            padding: 10px 14px;
            margin: 10px 0;
            text-align: center;
        }
        
        .no-variants-message p {
            margin: 0;
            font-size: 13px;
            color: #92400e;
        }
        
        .no-variants-message.hidden {
            display: none;
        }
        
        /* ========== FIN MINI-CARRUSEL ========== */
        
        /* Opción de curva */
        .curva-option {
            background: #fff8e1;
            border: 1px solid #ffe082;
            border-radius: 10px;
            padding: 14px;
            margin-top: 14px;
        }
        
        .curva-checkbox {
            display: flex;
            align-items: flex-start;
            gap: 10px;
            cursor: pointer;
        }
        
        .curva-checkbox input {
            width: 18px;
            height: 18px;
            margin-top: 2px;
            accent-color: #f9a825;
        }
        
        .curva-checkbox-text h5 {
            font-size: 14px;
            font-weight: 600;
            color: #333;
            margin: 0 0 2px 0;
        }
        
        .curva-checkbox-text p {
            font-size: 12px;
            color: #888;
            margin: 0;
        }
        
        .curva-config {
            margin-top: 12px;
            padding-top: 12px;
            border-top: 1px dashed #ffe082;
            display: none;
        }
        
        .curva-config.show {
            display: block;
        }
        
        .curva-grid {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
        }

        .curva-grid-single {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
            gap: 8px;
        }
        
        .curva-item {
            text-align: center;
            padding: 8px;
            border: 0.5px solid #e5e7eb;
            border-radius: 8px;
            background: #fff;
        }
        
        .curva-item label {
            display: block;
            font-size: 11px;
            color: #666;
            margin-bottom: 4px;
            font-weight: 600;
        }
        
        .curva-item input {
            width: 40px;
            padding: 6px 4px;
            text-align: center;
            border: 1px solid #ddd;
            border-radius: 6px;
            font-size: 13px;
            font-weight: 600;
        }
        
        .curva-item input:focus {
            outline: none;
            border-color: #f9a825;
        }
        
        .curva-summary {
            margin-top: 10px;
            font-size: 13px;
            color: #f57f17;
            font-weight: 600;
        }

        .curva-table-scroll {
            overflow-x: auto;
            overflow-y: hidden;
            -webkit-overflow-scrolling: touch;
        }

        .curva-table-wrapper {
            border: 0.5px solid #e5e7eb;
            border-radius: 8px;
            overflow: hidden;
            background: #fff;
            min-width: max-content;
        }

        .curva-table {
            display: grid;
            width: max-content;
            min-width: 100%;
        }

        .curva-table-corner,
        .curva-table-header,
        .curva-table-row-label,
        .curva-table-cell {
            min-width: 0;
            min-height: 48px;
            border-right: 0.5px solid #e5e7eb;
            border-bottom: 0.5px solid #e5e7eb;
            display: flex;
            align-items: center;
            justify-content: center;
            box-sizing: border-box;
        }

        .curva-table-header,
        .curva-table-corner,
        .curva-table-row-label {
            background: #f9fafb;
        }

        .curva-table-header,
        .curva-table-row-label {
            font-size: 11px;
            font-weight: 600;
            color: #4b5563;
            padding: 8px 6px;
            text-align: center;
        }

        .curva-table-row-label {
            justify-content: flex-start;
            padding: 8px 10px;
        }

        .curva-table-cell {
            padding: 6px;
            background: #fff;
        }

        .curva-table-cell input {
            width: 40px;
            padding: 6px 4px;
            text-align: center;
            border: 1px solid #d1d5db;
            border-radius: 6px;
            font-size: 13px;
            font-weight: 600;
        }

        .curva-table-cell input:focus {
            outline: none;
            border-color: #f9a825;
        }

        .curva-table-cell-disabled {
            color: #9ca3af;
            font-size: 14px;
        }

        .upload-progress-row {
            display: none;
            margin: 14px 0 0;
            padding: 12px 14px;
            border-radius: 12px;
            background: #f8fafc;
            border: 0.5px solid #e5e7eb;
            gap: 10px;
        }

        .upload-progress-row:not(.hidden) {
            display: flex;
            flex-direction: column;
        }

        .upload-progress-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
        }

        .upload-progress-label {
            font-size: 13px;
            font-weight: 600;
            color: #374151;
        }

        .upload-progress-percent {
            font-size: 13px;
            font-weight: 700;
            color: var(--accent-color, #10b981);
            white-space: nowrap;
        }

        .upload-progress-bar {
            width: 100%;
            height: 8px;
            border-radius: 999px;
            background: #e5e7eb;
            overflow: hidden;
        }

        .upload-progress-fill {
            width: 0;
            height: 100%;
            border-radius: inherit;
            background: var(--accent-color, #10b981);
            transition: width 0.2s ease;
        }

        .upload-error-list {
            display: none;
            padding: 10px 12px;
            border-radius: 10px;
            background: #fff7ed;
            border: 0.5px solid #fdba74;
            color: #9a3412;
            font-size: 12px;
            line-height: 1.5;
        }

        .upload-error-list:not(.hidden) {
            display: block;
        }

        .upload-error-list strong {
            display: block;
            margin-bottom: 6px;
            font-size: 12px;
            font-weight: 700;
        }

        .upload-error-list ul {
            margin: 0;
            padding-left: 18px;
        }

        .upload-error-list li + li {
            margin-top: 4px;
        }

        .crop-modal.is-uploading .crop-modal-content {
            pointer-events: none;
        }

        .crop-modal.is-uploading .upload-progress-row,
        .crop-modal.is-uploading .crop-close {
            pointer-events: auto;
        }

        .crop-modal.is-uploading .crop-close {
            opacity: 0.45;
        }

        .upload-status-modal {
            position: fixed;
            inset: 0;
            z-index: 100000;
            display: none;
            align-items: center;
            justify-content: center;
            padding: 20px;
            background: rgba(15, 23, 42, 0.58);
            backdrop-filter: blur(4px);
        }

        .upload-status-modal.show {
            display: flex;
        }

        .upload-status-modal-content {
            width: min(100%, 480px);
            max-height: min(82vh, 760px);
            display: flex;
            flex-direction: column;
            gap: 16px;
            padding: 22px 20px 18px;
            border-radius: 18px;
            background: #ffffff;
            box-shadow: 0 24px 48px rgba(15, 23, 42, 0.18);
            overflow: hidden;
        }

        .upload-status-header {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            gap: 12px;
        }

        .upload-status-title {
            font-size: 22px;
            font-weight: 700;
            color: #0f172a;
            line-height: 1.15;
        }

        .upload-status-subtitle {
            margin-top: 6px;
            font-size: 14px;
            line-height: 1.45;
            color: #475569;
        }

        .upload-status-subtitle[data-tone="success"] {
            color: #15803d;
        }

        .upload-status-subtitle[data-tone="warning"] {
            color: #b45309;
        }

        .upload-status-subtitle[data-tone="error"] {
            color: #b91c1c;
        }

        .upload-status-progress {
            display: flex;
            flex-direction: column;
            gap: 10px;
            padding: 14px;
            border-radius: 14px;
            border: 0.5px solid #e2e8f0;
            background: #f8fafc;
        }

        .upload-status-progress-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
        }

        .upload-status-progress-label {
            font-size: 13px;
            font-weight: 600;
            color: #334155;
        }

        .upload-status-progress-percent {
            font-size: 13px;
            font-weight: 700;
            color: var(--accent-color, #10b981);
            white-space: nowrap;
        }

        .upload-status-progress-bar {
            width: 100%;
            height: 10px;
            border-radius: 999px;
            background: #e5e7eb;
            overflow: hidden;
        }

        .upload-status-progress-fill {
            width: 0;
            height: 100%;
            border-radius: inherit;
            background: var(--accent-color, #10b981);
            transition: width 0.2s ease;
        }

        .upload-status-list {
            display: flex;
            flex-direction: column;
            gap: 8px;
            max-height: 300px;
            padding-right: 4px;
            overflow-y: auto;
        }

        .upload-status-item {
            display: flex;
            align-items: flex-start;
            gap: 10px;
            padding: 10px 12px;
            border-radius: 12px;
            border: 0.5px solid #e5e7eb;
            background: #ffffff;
        }

        .upload-status-item--pending {
            color: #64748b;
            background: #f8fafc;
        }

        .upload-status-item--uploading {
            color: #1d4ed8;
            background: #eff6ff;
            border-color: #bfdbfe;
        }

        .upload-status-item--success {
            color: #15803d;
            background: #f0fdf4;
            border-color: #bbf7d0;
        }

        .upload-status-item--cancelled {
            color: #64748b;
            background: #f8fafc;
            border-color: #cbd5e1;
        }

        .upload-status-item--error {
            color: #b91c1c;
            background: #fef2f2;
            border-color: #fecaca;
        }

        .upload-status-item-icon {
            position: relative;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            width: 16px;
            height: 16px;
            margin-top: 1px;
            border: 1.5px solid currentColor;
            border-radius: 50%;
            box-sizing: border-box;
            font-size: 0;
            line-height: 1;
        }

        .upload-status-item--pending .upload-status-item-icon::after {
            content: '';
            width: 4px;
            height: 4px;
            border-radius: 50%;
            background: currentColor;
        }

        .upload-status-item--cancelled .upload-status-item-icon::after {
            content: '';
            width: 7px;
            height: 1.5px;
            border-radius: 999px;
            background: currentColor;
            transform: rotate(-45deg);
        }

        .upload-status-item--uploading .upload-status-item-icon {
            border-color: color-mix(in srgb, currentColor 28%, transparent);
            border-top-color: currentColor;
            animation: mc-upload-status-spin 0.72s linear infinite;
        }

        .upload-status-item--success .upload-status-item-icon::after {
            content: '';
            width: 7px;
            height: 4px;
            border-left: 1.5px solid currentColor;
            border-bottom: 1.5px solid currentColor;
            transform: translateY(-1px) rotate(-45deg);
        }

        .upload-status-item--error .upload-status-item-icon::before,
        .upload-status-item--error .upload-status-item-icon::after {
            content: '';
            position: absolute;
            width: 7px;
            height: 1.5px;
            border-radius: 999px;
            background: currentColor;
        }

        .upload-status-item--error .upload-status-item-icon::before {
            transform: rotate(45deg);
        }

        .upload-status-item--error .upload-status-item-icon::after {
            transform: rotate(-45deg);
        }

        @keyframes mc-upload-status-spin {
            to {
                transform: rotate(360deg);
            }
        }

        @media (prefers-reduced-motion: reduce) {
            .upload-status-item--uploading .upload-status-item-icon {
                animation-duration: 1.4s;
            }
        }

        .upload-status-item-text {
            font-size: 13px;
            line-height: 1.45;
            word-break: break-word;
        }

        .upload-status-item-name {
            font-weight: 600;
        }

        .upload-status-errors {
            display: none;
            padding: 12px 14px;
            border-radius: 12px;
            border: 0.5px solid #fecaca;
            background: #fff1f2;
            color: #b91c1c;
            font-size: 12px;
            line-height: 1.5;
        }

        .upload-status-errors:not(.hidden) {
            display: block;
        }

        .upload-status-errors strong {
            display: block;
            margin-bottom: 6px;
            font-size: 12px;
            font-weight: 700;
        }

        .upload-status-errors ul {
            margin: 0;
            padding-left: 18px;
        }

        .upload-status-actions {
            display: flex;
            gap: 10px;
            justify-content: flex-end;
        }

        .upload-status-actions .crop-btn {
            flex: 1 1 0;
        }

        .upload-status-modal.is-uploading .upload-status-close-btn {
            pointer-events: none;
            opacity: 0.6;
        }
        
        /* Límites de cantidad */
        .quantity-section {
            margin-top: 20px;
            padding-top: 16px;
            border-top: 1px solid #eee;
        }
        
        .quantity-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 14px;
        }
        
        .quantity-grid .config-group {
            margin-bottom: 0;
        }
        
        .quantity-grid label {
            font-size: 13px;
        }
        
        .quantity-grid input {
            text-align: center;
            padding: 10px;
        }
        
        /* Galería de fotos adicionales (modal antiguo) */
        #pm-gallery-section {
            margin-top: 0px;
            padding-top: 16px;
            border-top: 1px solid #eee;
        }
        
        .pm-gallery-preview {
            display: flex;
            gap: 10px;
            flex-wrap: wrap;
            margin-bottom: 12px;
            min-height: 20px;
        }
        
        .pm-gallery-preview:empty::before {
            content: 'Sin fotos adicionales';
            color: #888;
            font-size: 13px;
            font-style: italic;
        }

        /* Las fotos ya cargadas se muestran dentro del destino que las recibe,
           no en una bandeja separada sobre la asignación de opciones. */
        .pm-general-photo-upload > .pm-gallery-preview,
        .pm-gallery-upload > .pm-gallery-preview {
            width: 100%;
            min-height: 0;
            margin: 0 0 10px;
        }

        .pm-general-photo-upload > .pm-gallery-preview {
            grid-column: 1 / -1;
        }

        .pm-general-photo-upload > .pm-gallery-preview:empty,
        .pm-gallery-upload > .pm-gallery-preview:empty {
            display: none;
        }

        .pm-general-photo-upload > .pm-gallery-preview.has-images,
        .pm-gallery-upload > .pm-gallery-preview.has-images {
            display: flex;
        }
        
        .pm-gallery-item {
            position: relative;
            width: 70px;
            height: 70px;
            border-radius: 8px;
            overflow: hidden;
            border: 2px solid #e0e0e0;
        }
        
        .pm-gallery-item img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        
        .pm-gallery-remove {
            position: absolute;
            top: 2px;
            right: 2px;
            width: 20px;
            height: 20px;
            background: rgba(239, 68, 68, 0.9);
            color: var(--color-white);
            border: none;
            border-radius: 50%;
            font-size: 12px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            line-height: 1;
        }
        
        .pm-gallery-remove:hover {
            background: var(--color-danger-strong);
        }
        
        .pm-gallery-add-btn {
            padding: 10px 16px;
            background: #f5f5f5;
            border: 2px dashed #ccc;
            border-radius: 8px;
            font-size: 14px;
            font-weight: 500;
            color: #007AFF;
            cursor: pointer;
            transition: all 0.2s;
        }
        
        .pm-gallery-add-btn:hover {
            background: rgba(0, 122, 255, 0.05);
            border-color: #007AFF;
        }
        
        .pm-gallery-add-btn:disabled {
            opacity: 0.5;
            cursor: wait;
        }
        
        /* Footer de pasos */
        .step-footer {
            display: flex;
            gap: 10px;
            padding-top: 16px;
            border-top: 1px solid #eee;
            margin-top: 20px;
        }
        
        .btn-back {
            background: #f5f5f5;
            color: #666;
            display: flex;
            align-items: center;
            gap: 6px;
            padding: 12px 16px;
            border: none;
            border-radius: 8px;
            font-size: 14px;
            font-weight: 500;
            cursor: pointer;
        }
        
        .btn-back:hover {
            background: #eee;
        }
        
        .btn-next {
            background: #4A90A4;
            color: var(--color-white);
            flex: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
            padding: 12px 16px;
            border: none;
            border-radius: 8px;
            font-size: 14px;
            font-weight: 600;
            cursor: pointer;
        }
        
        .btn-next:hover {
            background: #3d7a8c;
        }
        
        .btn-save {
            background: #27ae60;
            color: var(--color-white);
            flex: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
            padding: 12px 16px;
            border: none;
            border-radius: 8px;
            font-size: 14px;
            font-weight: 600;
            cursor: pointer;
        }
        
        .btn-save:hover {
            background: #219a52;
        }

        /* Cargador de logo compacto y compartido por todos los temas */
        .logo-upload-container {
            display: grid;
            grid-template-columns: auto minmax(0, 1fr);
            align-items: center;
            gap: 10px;
            min-width: 0;
            padding: 8px;
            border: 1px solid color-mix(in srgb, currentColor 22%, transparent);
            border-radius: 10px;
            background: color-mix(in srgb, currentColor 4%, transparent);
            box-sizing: border-box;
        }

        .pm-option-visual-panel {
            margin-top: 16px;
            padding: 14px;
            border: 1px solid #e2e8f0;
            border-radius: 12px;
            background: #f8fafc;
        }

        .pm-option-visual-heading strong,
        .pm-option-visual-heading p {
            display: block;
        }

        .pm-option-visual-heading strong {
            color: #1f2937;
            font-size: 13px;
        }

        .pm-option-visual-heading strong span {
            color: #8b94a3;
            font-weight: 400;
        }

        .pm-option-visual-heading p {
            margin: 4px 0 12px;
            color: #64748b;
            font-size: 12px;
            line-height: 1.45;
        }

        .pm-option-visual-list {
            display: grid;
            gap: 8px;
        }

        .pm-option-visual-row {
            display: grid;
            grid-template-columns: minmax(80px, .8fr) minmax(140px, 1.2fr) 42px;
            gap: 8px;
            align-items: center;
        }

        .pm-option-visual-row > strong {
            min-width: 0;
            color: #334155;
            font-size: 12px;
            overflow-wrap: anywhere;
        }

        .pm-option-visual-row select,
        .pm-option-visual-row input[type="color"],
        .pm-gallery-assignment select,
        .pm-primary-photo-assignment select {
            min-height: 40px;
            border: 1px solid #d8dee8;
            border-radius: 8px;
            background: #fff;
            color: #1f2937;
        }

        .pm-option-visual-row input[type="color"] {
            width: 42px;
            padding: 3px;
        }

        .pm-primary-photo-assignment {
            display: grid;
            grid-template-columns: 52px minmax(0, 1fr);
            gap: 10px;
            align-items: center;
            margin: 10px 0 14px;
            padding: 10px;
            border: 1px solid #e2e8f0;
            border-radius: 10px;
            background: #f8fafc;
        }

        .pm-primary-photo-assignment img,
        .pm-primary-photo-placeholder {
            width: 52px;
            height: 52px;
            border-radius: 8px;
            object-fit: cover;
            object-position: 50% 50%;
        }

        .pm-primary-photo-placeholder {
            display: grid;
            place-items: center;
            background: #e9eef5;
            color: #64748b;
            font-size: 10px;
            text-align: center;
        }

        .pm-primary-photo-assignment.pm-primary-photo-picker {
            display: block;
            grid-template-columns: minmax(0, 1fr);
            align-items: stretch;
        }

        #product-modal .pm-primary-photo-picker label {
            display: grid;
            grid-template-columns: minmax(0, 1fr);
            gap: 7px;
            width: 100%;
            max-width: none;
        }

        #product-modal .pm-primary-photo-picker select {
            display: block;
            width: 100%;
            max-width: none;
            min-width: 0;
        }

        .pm-primary-photo-copy {
            display: grid;
            gap: 3px;
            min-width: 0;
        }

        .pm-primary-photo-copy strong {
            color: var(--color-text-primary, #1f2937);
            font-size: 12px;
        }

        .pm-primary-photo-copy span,
        .pm-primary-photo-assignment label > span {
            color: var(--color-text-muted, #64748b);
            font-size: 10px;
            line-height: 1.4;
        }

        #product-modal .pm-primary-catalog-actions {
            display: grid;
            gap: 7px;
            margin: -6px 0 14px;
            padding: 10px;
            border: 1px solid var(--pm-border, #e2e8f0);
            border-radius: 10px;
            background: var(--pm-surface, #fff);
        }

        #product-modal .pm-primary-catalog-action-buttons {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 8px;
        }

        #product-modal .pm-primary-catalog-action-buttons button {
            min-height: 36px;
            padding: 7px 9px;
            border: 1px solid var(--pm-border, #d8dee8);
            border-radius: 8px;
            background: var(--pm-surface-strong, #f8fafc);
            color: var(--pm-text, #334155);
            font: inherit;
            font-size: 11px;
            font-weight: 700;
            line-height: 1.25;
            cursor: pointer;
        }

        #product-modal .pm-primary-catalog-action-buttons .pm-delete-catalog-image-btn {
            border-color: rgba(220, 38, 38, 0.35);
            color: #dc2626;
        }

        #product-modal .pm-primary-catalog-actions > small {
            color: #b42318;
            font-size: 10px;
            line-height: 1.35;
        }

        .image-options-delete-warning {
            margin: 0 0 16px !important;
            color: #b42318;
            font-size: 0.82rem;
            line-height: 1.4;
        }

        .pm-photo-map-list {
            display: grid;
            gap: 8px;
            margin: 0 0 12px;
        }

        .pm-photo-map-row {
            display: grid;
            grid-template-columns: 52px minmax(0, 1fr) auto;
            gap: 9px;
            align-items: center;
            min-width: 0;
            padding: 8px;
            border: 1px solid var(--color-border-muted, #dfe3ea);
            border-radius: 10px;
            background: var(--color-surface-base, #fff);
        }

        .pm-photo-map-thumb {
            position: relative;
            display: grid;
            place-items: center;
            width: 52px;
            height: 52px;
            overflow: hidden;
            border-radius: 8px;
            background: var(--color-surface-muted, #eef2f7);
            color: var(--color-text-muted, #64748b);
            font-size: 9px;
            text-transform: uppercase;
        }

        .pm-photo-map-thumb img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: 50% 50%;
        }

        .pm-photo-map-thumb button {
            position: absolute;
            top: 2px;
            right: 2px;
            display: grid;
            place-items: center;
            width: 19px;
            height: 19px;
            padding: 0;
            border: 0;
            border-radius: 50%;
            background: rgba(17, 24, 39, .78);
            color: #fff;
            line-height: 1;
            cursor: pointer;
        }

        .pm-photo-map-copy {
            display: grid;
            gap: 3px;
            min-width: 0;
        }

        .pm-photo-map-copy strong {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            color: var(--color-text-primary, #1f2937);
            font-size: 12px;
        }

        .pm-photo-map-copy strong i {
            width: 13px;
            height: 13px;
            flex: 0 0 13px;
            border: 1px solid color-mix(in srgb, var(--color-text-primary, #1f2937) 24%, transparent);
            border-radius: 4px;
            background: var(--option-color);
        }

        .pm-photo-map-copy span {
            color: var(--color-text-muted, #64748b);
            font-size: 10px;
            line-height: 1.35;
        }

        .pm-photo-map-upload,
        .pm-photo-map-badge {
            min-height: 36px;
            padding: 0 10px;
            border-radius: 8px;
            font-size: 10px;
            font-weight: 700;
            white-space: nowrap;
        }

        .pm-photo-map-upload {
            border: 1px dashed var(--color-border-muted, #cbd5e1);
            background: var(--color-surface-base, #fff);
            color: var(--accent-color, #007aff);
            cursor: pointer;
        }

        body:not(.theme-negro):not(.theme-matrix) #product-modal .pm-photo-map-upload {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
        }

        body:not(.theme-negro):not(.theme-matrix) #product-modal .pm-photo-map-upload svg {
            width: 15px;
            height: 15px;
            fill: none;
            stroke: currentColor;
            stroke-width: 1.8;
            stroke-linecap: round;
            stroke-linejoin: round;
        }

        .pm-photo-map-badge {
            display: inline-flex;
            align-items: center;
            background: var(--color-surface-muted, #eef2f7);
            color: var(--color-text-muted, #64748b);
        }

        .pm-general-photo-upload {
            display: block;
        }

        .pm-general-photo-copy {
            display: none;
        }

        .pm-general-photo-upload.is-mapping {
            display: grid;
            grid-template-columns: minmax(0, 1fr) auto;
            gap: 10px;
            align-items: center;
            padding: 10px;
            border: 1px dashed var(--color-border-muted, #cbd5e1);
            border-radius: 10px;
            background: var(--color-surface-muted, #f8fafc);
        }

        .pm-general-photo-upload.is-mapping .pm-general-photo-copy {
            display: grid;
            gap: 2px;
        }

        .pm-general-photo-copy strong {
            color: var(--color-text-primary, #1f2937);
            font-size: 11px;
        }

        .pm-general-photo-copy span {
            color: var(--color-text-muted, #64748b);
            font-size: 9px;
        }

        .pm-primary-photo-assignment label,
        .pm-gallery-assignment {
            display: grid;
            gap: 5px;
            min-width: 0;
        }

        .pm-primary-photo-assignment strong,
        .pm-gallery-assignment span {
            color: #475569;
            font-size: 11px;
            font-weight: 700;
        }

        .pm-gallery-item-shell {
            display: grid;
            grid-template-columns: 70px minmax(130px, 1fr);
            gap: 8px;
            align-items: center;
            width: min(100%, 260px);
        }

        .pm-gallery-item-shell .pm-gallery-item {
            width: 70px;
            height: 70px;
        }

        .pm-pack-legacy-note {
            margin: 0 0 8px;
            color: #64748b;
            font-size: 12px;
        }

        @media (max-width: 560px) {
            .pm-option-visual-row {
                grid-template-columns: minmax(72px, .7fr) minmax(0, 1.3fr) 40px;
            }

            .pm-gallery-item-shell {
                grid-template-columns: 62px minmax(0, 1fr);
                width: 100%;
            }

            .pm-gallery-item-shell .pm-gallery-item {
                width: 62px;
                height: 62px;
            }

            .pm-photo-map-row {
                grid-template-columns: 48px minmax(0, 1fr);
            }

            .pm-photo-map-thumb {
                width: 48px;
                height: 48px;
            }

            .pm-photo-map-upload,
            .pm-photo-map-badge {
                grid-column: 2;
                justify-self: start;
            }

            .pm-general-photo-upload.is-mapping {
                grid-template-columns: 1fr;
            }
        }

        @media (prefers-reduced-motion: reduce) {
            .add-variant-row.pm-pending-option-highlight {
                animation: none;
                box-shadow: 0 0 0 3px rgba(245, 158, 11, .22);
            }
        }

        .logo-upload-container:not(:has(.current-logo)) {
            grid-template-columns: minmax(0, 1fr);
        }

        .current-logo {
            position: relative;
            display: block;
            width: 72px;
            height: 72px;
            min-width: 72px;
            padding: 4px;
            border: 1px solid color-mix(in srgb, currentColor 22%, transparent);
            border-radius: 8px;
            background: color-mix(in srgb, currentColor 5%, transparent);
            box-sizing: border-box;
        }

        .current-logo img {
            display: block;
            width: 62px !important;
            height: 62px !important;
            max-width: 62px !important;
            max-height: 62px !important;
            object-fit: contain;
            border: 0;
            border-radius: 6px !important;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
        }

        .btn-remove-logo {
            position: absolute;
            top: -7px;
            right: -7px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 24px;
            height: 24px;
            margin: 0 !important;
            padding: 0 !important;
            border: 2px solid var(--color-surface, #fff) !important;
            border-radius: 999px !important;
            background: #ef4444 !important;
            color: #fff !important;
            font-size: 0 !important;
            line-height: 1;
            cursor: pointer;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25);
            transition: transform 0.2s ease, background-color 0.2s ease;
        }

        .btn-remove-logo::before {
            content: "×";
            font-size: 16px;
            font-weight: 700;
            line-height: 1;
        }

        .btn-remove-logo:hover {
            background: var(--color-danger-strong, #dc2626) !important;
            transform: scale(1.06);
        }

        .logo-upload-container #business-logo {
            width: 100%;
            min-width: 0;
            min-height: 42px;
            max-height: 48px;
            padding: 5px !important;
            border-width: 1px;
            border-style: dashed;
            border-radius: 8px;
            box-sizing: border-box;
            font-size: 0.75rem;
            cursor: pointer;
        }

        .logo-upload-container #business-logo::file-selector-button {
            margin-right: 8px;
            padding: 8px 10px;
            border: 0;
            border-radius: 6px;
            background: var(--accent-color, #10b981);
            color: var(--accent-contrast-color, #fff);
            font: inherit;
            font-weight: 700;
            cursor: pointer;
        }

        .logo-upload-container + small {
            display: block;
            width: 100%;
            margin: 6px 0 0 !important;
        }

        .current-logo > small {
            position: absolute;
            top: calc(100% + 8px);
            left: 0;
            z-index: 1;
            width: max-content;
            max-width: min(260px, calc(100vw - 96px));
            margin: 0 !important;
            font-size: 0.68rem !important;
            line-height: 1.3;
            white-space: normal;
        }

        .logo-upload-container:has(.current-logo > small) {
            margin-bottom: 30px;
        }

        @media (max-width: 420px) {
            .logo-upload-container {
                gap: 8px;
                padding: 7px;
            }

            .current-logo {
                width: 64px;
                height: 64px;
                min-width: 64px;
            }

            .current-logo img {
                width: 54px !important;
                height: 54px !important;
                max-width: 54px !important;
                max-height: 54px !important;
            }

            .btn-remove-logo {
                width: 22px;
                height: 22px;
            }

            .logo-upload-container #business-logo::file-selector-button {
                margin-right: 6px;
                padding: 7px 8px;
            }
        }

        /* Estilos para modal de información del negocio */
        .business-info-header {
            display: flex;
            align-items: flex-start;
            gap: 16px;
            margin-bottom: 24px;
            padding-bottom: 46px;
            border-bottom: 1px solid var(--color-border-muted);
        }

        .business-logo {
            flex-shrink: 0;
        }

        .logo-image {
            width: 80px;
            height: 80px;
            object-fit: cover;
            border-radius: 12px;
            border: 2px solid var(--color-border-muted);
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        }

        .business-name-section h3 {
            margin: 0 0 8px 0;
            font-size: 1.5rem;
            font-weight: 600;
            color: var(--color-text-strong);
        }

        .business-description {
            margin: 0;
            color: var(--color-text-muted);
            font-size: 0.9rem;
            line-height: 1.5;
        }

        .social-media-section,
        .how-to-buy-section,
        .contact-section {
            margin-bottom: 24px;
            padding-bottom: 20px;
            border-bottom: 1px solid var(--color-border-soft);
        }

        .social-media-section:last-of-type,
        .how-to-buy-section:last-of-type,
        .contact-section {
            border-bottom: none;
            margin-bottom: 16px;
        }

        .social-media-section h4,
        .how-to-buy-section h4 {
            margin: 0 0 12px 0;
            font-size: 1rem;
            font-weight: 600;
            color: var(--color-text-secondary);
        }

        .social-links {
            display: flex;
            flex-direction: column;
            gap: 8px;
        }

        .social-link {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 10px 12px;
            background: var(--color-surface-muted);
            border: 1px solid var(--color-border-muted);
            border-radius: 8px;
            text-decoration: none;
            color: var(--color-text-secondary);
            font-size: 0.875rem;
            font-weight: 500;
            transition: all 0.2s ease;
        }

        .social-link:hover {
            background: var(--color-border-soft);
            transform: translateY(-1px);
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }

        .social-link.instagram:hover {
            color: #e1306c;
            border-color: #e1306c;
        }

        .social-link.tiktok:hover {
            color: var(--color-black);
            border-color: var(--color-black);
        }

        .social-link.facebook:hover {
            color: #1877f2;
            border-color: #1877f2;
        }

        .how-to-buy-text {
            background: var(--color-surface-slate);
            padding: 16px;
            border-radius: 8px;
            border-left: 4px solid var(--color-success-strong);
            font-size: 0.875rem;
            line-height: 1.6;
            color: var(--color-text-secondary);
        }

        .whatsapp-contact-btn {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 12px;
            width: 100%;
            padding: 14px 20px;
            background: #25d366;
            color: var(--color-white);
            text-decoration: none;
            border-radius: 10px;
            font-weight: 600;
            font-size: 0.95rem;
            transition: all 0.2s ease;
            box-shadow: 0 2px 8px rgba(37, 211, 102, 0.3);
        }

        .whatsapp-contact-btn:hover {
            background: #128c7e;
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(37, 211, 102, 0.4);
            color: var(--color-white);
        }

        .modal-close-section {
            margin-top: 20px;
            padding-top: 16px;
            border-top: 1px solid var(--color-border-muted);
        }

        /* MODAL MINIMALISTA Y PROFESIONAL */
        .order-modal {
            position: fixed !important;
            top: 0 !important;
            left: 0 !important;
            right: 0 !important;
            bottom: 0 !important;
            background: rgba(0, 0, 0, 0.6) !important;
            backdrop-filter: blur(8px) !important;
            z-index: 2000 !important;
            display: none !important;
            align-items: center !important;
            justify-content: center !important;
            padding: 20px !important;
            opacity: 0 !important;
            transition: all 0.3s ease !important;
        }

        .order-modal.show,
        #order-modal.show {
            display: flex !important;
            opacity: 1 !important;
            visibility: visible !important;
        }

        /* MODAL DE CONFIRMACIÓN PARA VACIAR CARRITO */
        .confirm-modal {
            position: fixed !important;
            top: 0 !important;
            left: 0 !important;
            width: 100% !important;
            height: 100% !important;
            background: rgba(0, 0, 0, 0.6) !important;
            display: none !important;
            align-items: center !important;
            justify-content: center !important;
            z-index: 999999 !important;
            backdrop-filter: blur(4px) !important;
        }

        .confirm-content {
            background: var(--color-white) !important;
            border-radius: 12px !important;
            padding: 0 !important;
            max-width: 400px !important;
            width: 90% !important;
            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04) !important;
            overflow: hidden !important;
        }

        .confirm-header {
            padding: 20px 24px 16px 24px !important;
            border-bottom: 1px solid var(--color-border-soft) !important;
        }

        .confirm-header h4 {
            margin: 0 !important;
            font-size: 18px !important;
            font-weight: 600 !important;
            color: var(--color-text-strong) !important;
        }

        .confirm-body {
            padding: 16px 24px !important;
        }

        .confirm-body p {
            margin: 0 !important;
            color: var(--color-text-muted) !important;
            font-size: 14px !important;
            line-height: 1.5 !important;
        }

        .confirm-footer {
            padding: 16px 24px 20px 24px !important;
            display: flex !important;
            gap: 12px !important;
            justify-content: flex-end !important;
        }

        .btn-confirm-cancel,
        .btn-confirm-clear {
            padding: 8px 16px !important;
            border-radius: 6px !important;
            font-size: 14px !important;
            font-weight: 500 !important;
            cursor: pointer !important;
            transition: all 0.2s ease !important;
            border: none !important;
        }

        .btn-confirm-cancel {
            background: var(--color-surface-muted) !important;
            color: var(--color-text-secondary) !important;
            border: 1px solid #d1d5db !important;
        }

        .btn-confirm-cancel:hover {
            background: var(--color-border-soft) !important;
        }

        .btn-confirm-clear {
            background: var(--color-danger) !important;
            color: var(--color-white) !important;
        }

        .btn-confirm-clear:hover {
            background: var(--color-danger-strong) !important;
        }

        .btn-confirm-delete {
            background: var(--color-danger) !important;
            color: var(--color-white) !important;
            padding: 8px 16px !important;
            border-radius: 6px !important;
            font-size: 14px !important;
            font-weight: 500 !important;
            cursor: pointer !important;
            border: none !important;
        }

        .btn-confirm-delete:hover {
            background: var(--color-danger-strong) !important;
        }

        /* Botones de opciones de imagen (reemplazar/eliminar) */
        .image-options-body {
            display: flex !important;
            flex-direction: column !important;
            gap: 10px !important;
        }

        .btn-image-option {
            display: flex !important;
            align-items: center !important;
            gap: 12px !important;
            width: 100% !important;
            padding: 12px 16px !important;
            border-radius: 8px !important;
            font-size: 14px !important;
            font-weight: 500 !important;
            cursor: pointer !important;
            border: 1px solid var(--color-border-muted) !important;
            background: var(--color-surface-muted) !important;
            color: var(--color-text-secondary) !important;
            transition: all 0.15s ease !important;
            text-align: left !important;
        }

        .btn-image-option:hover {
            background: var(--color-border-soft) !important;
            border-color: #d1d5db !important;
        }

        .btn-image-option svg {
            flex-shrink: 0 !important;
            color: var(--color-text-muted) !important;
        }

        .btn-image-option.btn-replace:hover {
            background: #eff6ff !important;
            border-color: var(--color-info) !important;
            color: #1d4ed8 !important;
        }

        .btn-image-option.btn-replace:hover svg {
            color: var(--color-info) !important;
        }

        .btn-image-option.btn-delete:hover {
            background: var(--color-danger-soft) !important;
            border-color: var(--color-danger) !important;
            color: var(--color-danger-strong) !important;
        }

        .btn-image-option.btn-delete:hover svg {
            color: var(--color-danger) !important;
        }
        
        /* Footer centrado para modal de opciones imagen */
        #confirm-delete-image-modal .confirm-footer {
            justify-content: center !important;
            border-top: 1px solid var(--color-border-soft) !important;
            padding-top: 16px !important;
        }

        .confirm-modal.show {
            display: flex !important;
        }
        
        .confirm-modal.active {
            display: flex !important;
        }

        /* ===== MODAL ACOMODAR IMAGEN ===== */
        .crop-modal {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.85);
            display: none;
            align-items: stretch;
            justify-content: center;
            z-index: 999999;
            backdrop-filter: blur(4px);
            padding: 0;
        }
        
        .crop-modal.show {
            display: flex;
        }
        
        .crop-modal-content {
            background: var(--color-white);
            width: 100%;
            height: 100%;
            max-width: 100%;
            max-height: 100%;
            overflow-y: auto;
            overflow-x: hidden;
            display: flex;
            flex-direction: column;
            border-radius: 0;
            -webkit-overflow-scrolling: touch;
        }
        
        /* Desktop: modal centrado */
        @media (min-width: 600px) and (min-height: 500px) {
            .crop-modal {
                padding: 20px;
                align-items: center;
            }
            .crop-modal-content {
                max-width: 380px;
                max-height: 90vh;
                height: auto;
                border-radius: 12px;
                overflow-y: auto;
            }
        }
        
        .crop-header {
            padding: 12px 16px 8px;
            position: relative;
            flex-shrink: 0;
        }
        
        .crop-category {
            font-size: 11px;
            color: #999;
            margin-bottom: 2px;
        }
        
        .crop-title {
            font-size: 16px;
            font-weight: 600;
            color: var(--color-charcoal);
        }
        
        .crop-close {
            position: absolute;
            top: 10px;
            right: 10px;
            font-size: 22px;
            color: #999;
            cursor: pointer;
            line-height: 1;
            width: 32px;
            height: 32px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            transition: all 0.2s ease;
        }
        
        .crop-close:hover {
            background: var(--color-border-soft);
            color: #666;
        }
        
        .crop-progress-row {
            padding: 0 16px 8px;
            display: flex;
            align-items: center;
            gap: 8px;
            flex-shrink: 0;
        }
        
        .crop-progress-row.hidden {
            display: none;
        }
        
        .crop-progress-text {
            font-size: 12px;
            color: #666;
        }
        
        .crop-progress-dots {
            display: flex;
            gap: 4px;
        }
        
        .crop-dot {
            width: 6px;
            height: 6px;
            border-radius: 50%;
            background: #e0e0e0;
            transition: background 0.2s ease;
        }
        
        .crop-dot.done,
        .crop-dot.current {
            background: var(--primary-color, #5a9a8a);
        }
        
        .crop-preview-area {
            padding: 0 16px;
            flex: 1 1 auto;
            display: flex;
            align-items: center;
            justify-content: center;
            min-height: 120px;
            overflow: hidden;
        }
          
        .crop-frame {
            width: 100%;
            max-width: 280px;
            aspect-ratio: 4 / 6.7;
            background: var(--crop-frame-background, var(--crop-frame-theme-background, #f0f0f0));
            border-radius: 8px;
            position: relative;
            overflow: hidden;
            cursor: grab;
            touch-action: none;
        }
        
        /* Limitar altura máxima del frame en pantallas pequeñas */
        @media (max-height: 600px) {
            .crop-frame {
                max-width: 160px;
            }
        }
        
        @media (max-height: 500px) {
            .crop-frame {
                max-width: 120px;
            }
        }
        
        @media (min-height: 700px) {
            .crop-frame {
                max-width: 300px;
            }
        }
        
        .crop-frame:active {
            cursor: grabbing;
        }
        
        .crop-frame-img {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            min-width: 0;
            min-height: 0;
            width: auto;
            height: auto;
            pointer-events: none;
        }
        
        /* Indicadores de recorte - degradados en los bordes */
        .crop-frame::before,
        .crop-frame::after {
            content: '';
            position: absolute;
            left: 0;
            right: 0;
            height: 30px;
            pointer-events: none;
            z-index: 5;
            opacity: 0;
            transition: opacity 0.3s ease;
        }
        
        .crop-frame::before {
            top: 0;
        }
        
        .crop-frame::after {
            bottom: 0;
        }
        
        .crop-frame.show-crop-indicators::before,
        .crop-frame.show-crop-indicators::after {
            opacity: 1;
        }
        
        /* Indicadores laterales */
        .crop-frame-edge-left,
        .crop-frame-edge-right {
            position: absolute;
            top: 0;
            bottom: 0;
            width: 25px;
            pointer-events: none;
            z-index: 5;
            opacity: 0;
            transition: opacity 0.3s ease;
        }
        
        .crop-frame-edge-left {
            left: 0;
        }
        
        .crop-frame-edge-right {
            right: 0;
        }
        
        .crop-frame.show-left-edge .crop-frame-edge-left,
        .crop-frame.show-right-edge .crop-frame-edge-right {
            opacity: 1;
        }
        
        .crop-drag-hint {
            position: absolute;
            bottom: 12px;
            left: 50%;
            transform: translateX(-50%);
            background: rgba(0, 0, 0, 0.65);
            color: var(--color-white);
            padding: 8px 14px;
            border-radius: 16px;
            font-size: 12px;
            pointer-events: none;
            transition: opacity 0.3s ease;
            z-index: 10;
        }
        
        .crop-drag-hint.hidden {
            opacity: 0;
        }
        
        .crop-adjust-row {
            padding: 10px 16px;
            flex-shrink: 0;
        }
        
        .crop-adjust-label {
            font-size: 10px;
            color: #888;
            margin-bottom: 4px;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }
        
        .crop-adjust-control {
            display: flex;
            align-items: center;
            gap: 10px;
        }
        
        .crop-adjust-icon {
            font-size: 14px;
            color: #999;
            user-select: none;
        }
        
        .crop-slider {
            flex: 1;
            height: 4px;
            background: #e5e5e5;
            border-radius: 2px;
            position: relative;
            cursor: pointer;
        }
        
        .crop-slider-track {
            height: 100%;
            background: var(--primary-color, #5a9a8a);
            border-radius: 2px;
            width: 0%;
            transition: width 0.1s ease;
        }
        
        .crop-slider-thumb {
            position: absolute;
            top: 50%;
            left: 0%;
            transform: translate(-50%, -50%);
            width: 16px;
            height: 16px;
            background: var(--color-white);
            border: 2px solid var(--primary-color, #5a9a8a);
            border-radius: 50%;
            cursor: grab;
            transition: box-shadow 0.2s ease;
        }
        
        .crop-slider-thumb:active {
            cursor: grabbing;
            box-shadow: 0 0 0 4px rgba(90, 154, 138, 0.2);
        }

        .crop-background-row {
            padding: 0 16px 10px;
            flex-shrink: 0;
        }

        .crop-background-control {
            display: grid;
            grid-template-columns: 34px minmax(64px, 1fr) auto auto;
            align-items: center;
            gap: 7px;
            min-width: 0;
        }

        .crop-background-color {
            width: 34px;
            height: 30px;
            padding: 2px;
            border: 1px solid var(--color-border-subtle, #d1d5db);
            border-radius: 7px;
            background: var(--color-surface, #fff);
            cursor: pointer;
        }

        .crop-background-value {
            min-width: 0;
            overflow: hidden;
            color: var(--color-text-secondary, #64748b);
            font-size: 11px;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .crop-background-action {
            min-height: 30px;
            padding: 5px 8px;
            border: 1px solid var(--color-border-subtle, #d1d5db);
            border-radius: 7px;
            background: var(--color-surface, #fff);
            color: var(--color-text-primary, #334155);
            font: inherit;
            font-size: 10px;
            font-weight: 600;
            line-height: 1.1;
            cursor: pointer;
        }

        .crop-background-action:hover,
        .crop-background-action:focus-visible,
        .crop-background-action.is-active {
            border-color: var(--primary-color, #5a9a8a);
            color: var(--primary-color, #5a9a8a);
        }

        .crop-background-action:disabled {
            cursor: default;
            opacity: .45;
        }

        .crop-background-presets {
            display: none;
        }

        @media (max-width: 380px) {
            .crop-background-control {
                grid-template-columns: 34px minmax(52px, 1fr) auto;
            }

            .crop-background-action {
                padding-inline: 6px;
            }

            #crop-background-auto {
                grid-column: 2 / -1;
            }
        }
        
        .crop-actions {
            display: flex;
            gap: 8px;
            padding: 10px 16px;
            flex-shrink: 0;
            background: var(--color-white);
        }
        
        .crop-btn {
            flex: 1;
            padding: 12px 10px;
            border-radius: 8px;
            font-size: 13px;
            font-weight: 500;
            cursor: pointer;
            border: none;
            transition: all 0.2s ease;
        }
        
        @media (max-width: 599px) {
            .crop-actions {
                padding: 10px 16px;
                padding-bottom: max(16px, env(safe-area-inset-bottom));
            }
        }
         
        .crop-image-hint {
            text-align: center;
            font-size: 11px;
            color: #999;
            padding: 0 16px 8px;
            flex-shrink: 0;
        }
        
        @media (max-height: 500px) {
            .crop-adjust-row {
                padding: 6px 16px;
            }
            .crop-actions {
                padding: 6px 16px;
            }
            .crop-btn {
                padding: 10px 8px;
                font-size: 12px;
            }
        }
        
        .crop-btn-secondary {
            background: var(--color-white);
            color: #555;
            border: 1px solid #ddd;
        }
        
        .crop-btn-secondary:hover {
            background: var(--color-surface-muted);
            border-color: #ccc;
        }
        
        .crop-btn-primary {
            background: var(--primary-color, #5a9a8a);
            color: var(--color-white);
        }
        
        .crop-btn-primary:hover {
            filter: brightness(0.95);
        }
        
        .crop-btn-primary:disabled {
            opacity: 0.6;
            cursor: not-allowed;
        }
        
        .crop-thumbs-area {
            padding: 8px 16px;
            border-top: 1px solid #eee;
            flex-shrink: 0;
            background: #fafafa;
        }
        
        .crop-thumbs-area.hidden {
            display: none;
        }
        
        @media (max-width: 599px) {
            .crop-thumbs-area {
                padding-bottom: max(8px, env(safe-area-inset-bottom));
            }
        }
        
        @media (max-height: 500px) {
            .crop-thumbs-area {
                padding: 6px 16px;
            }
        }
        
        .crop-thumbs-scroll {
            display: flex;
            gap: 6px;
            overflow-x: auto;
            padding-bottom: 2px;
            -webkit-overflow-scrolling: touch;
        }
        
        .crop-thumbs-scroll::-webkit-scrollbar {
            height: 3px;
        }
        
        .crop-thumbs-scroll::-webkit-scrollbar-track {
            background: #f1f1f1;
            border-radius: 2px;
        }
        
        .crop-thumbs-scroll::-webkit-scrollbar-thumb {
            background: #ccc;
            border-radius: 2px;
        }
        
        .crop-thumb {
            width: 40px;
            height: 40px;
            border-radius: 5px;
            background: #ddd;
            flex-shrink: 0;
            border: 2px solid transparent;
            overflow: hidden;
            cursor: pointer;
            transition: all 0.2s ease;
        }
        
        @media (max-height: 500px) {
            .crop-thumb {
                width: 32px;
                height: 32px;
            }
        }
        
        .crop-thumb img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        
        .crop-thumb.current {
            border-color: var(--primary-color, #5a9a8a);
        }
        
        .crop-thumb.done {
            border-color: var(--primary-color, #5a9a8a);
            opacity: 0.6;
        }

        /* Botón crop imagen en overlay-controls-row */
        .crop-image-btn {
            position: relative;
            top: auto;
            right: auto;
            background: rgba(35, 35, 35, 0.7);
            color: var(--color-white);
            border: none;
            border-radius: 50%;
            width: 36px;
            height: 36px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.2s ease;
            opacity: 0.8;
            pointer-events: auto;
            touch-action: manipulation;
            -webkit-tap-highlight-color: transparent;
            user-select: none;
        }
        
        .crop-image-btn:hover {
            background: rgba(35, 35, 35, 0.7);
            opacity: 1;
        }
        
        .crop-image-btn svg {
            flex-shrink: 0;
            width: 18px;
            height: 18px;
        }

        /* ===== FIN MODAL ACOMODAR IMAGEN ===== */

        /* MODAL DE COMPARTIR */
        .share-modal {
            position: fixed !important;
            top: 0 !important;
            left: 0 !important;
            width: 100% !important;
            height: 100% !important;
            background: rgba(0, 0, 0, 0.6) !important;
            display: none !important;
            align-items: center !important;
            justify-content: center !important;
            z-index: 999999 !important;
            backdrop-filter: blur(4px) !important;
        }

        .share-content {
            background: var(--color-white) !important;
            border-radius: 16px !important;
            padding: 0 !important;
            max-width: 420px !important;
            width: 90% !important;
            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04) !important;
            overflow: hidden !important;
        }

        .share-header {
            padding: 20px 24px 16px 24px !important;
            border-bottom: 1px solid var(--color-border-soft) !important;
            display: flex !important;
            justify-content: space-between !important;
            align-items: center !important;
        }

        .share-header h4 {
            margin: 0 !important;
            font-size: 18px !important;
            font-weight: 600 !important;
            color: var(--color-text-strong) !important;
        }

        .share-close {
            background: none !important;
            border: none !important;
            font-size: 24px !important;
            color: #9ca3af !important;
            cursor: pointer !important;
            padding: 0 !important;
            width: 32px !important;
            height: 32px !important;
            display: flex !important;
            align-items: center !important;
            justify-content: center !important;
            border-radius: 50% !important;
            transition: all 0.2s ease !important;
        }

        .share-close:hover {
            background: var(--color-border-soft) !important;
            color: var(--color-text-secondary) !important;
        }

        .share-body {
            padding: 20px 24px !important;
        }

        .share-options {
            display: grid !important;
            grid-template-columns: 1fr 1fr !important;
            gap: 12px !important;
            margin-bottom: 20px !important;
        }

        .share-option {
            display: flex !important;
            flex-direction: column !important;
            align-items: center !important;
            gap: 8px !important;
            padding: 16px 12px !important;
            border: 1px solid var(--color-border-muted) !important;
            border-radius: 12px !important;
            background: var(--color-white) !important;
            cursor: pointer !important;
            transition: all 0.2s ease !important;
            font-size: 14px !important;
            font-weight: 500 !important;
            color: var(--color-text-secondary) !important;
        }

        .share-option:hover {
            border-color: var(--color-info) !important;
            background: var(--color-surface-slate) !important;
            transform: translateY(-2px) !important;
            box-shadow: 0 4px 12px rgba(59, 130, 246, 0.15) !important;
        }

        .share-icon {
            width: 48px !important;
            height: 48px !important;
            display: flex !important;
            align-items: center !important;
            justify-content: center !important;
            border-radius: 12px !important;
            transition: all 0.2s ease !important;
        }

        .share-icon svg {
            transition: all 0.2s ease !important;
        }

        .whatsapp-icon { 
            background:rgb(255, 255, 255) !important; 
            color: #16a34a !important;
        }
        .instagram-icon { 
            background: #fdf2f8 !important; 
            color: #e11d48 !important;
        }
        .email-icon { 
            background: #eff6ff !important; 
            color: #2563eb !important;
        }
        .copy-icon { 
            background: var(--color-surface-slate) !important; 
            color: var(--color-text-slate) !important;
        }

        .share-option:hover .whatsapp-icon {
            background: #16a34a !important;
            color: var(--color-white) !important;
        }
        .share-option:hover .instagram-icon {
            background: #e11d48 !important;
            color: var(--color-white) !important;
        }
        .share-option:hover .email-icon {
            background: #2563eb !important;
            color: var(--color-white) !important;
        }
        .share-option:hover .copy-icon {
            background: #475569 !important;
            color: var(--color-white) !important;
        }

        .share-url {
            margin-top: 16px !important;
        }

        .share-url input {
            width: 100% !important;
            padding: 12px 16px !important;
            border: 1px solid var(--color-border-muted) !important;
            border-radius: 8px !important;
            font-size: 14px !important;
            color: var(--color-text-muted) !important;
            background: var(--color-surface-muted) !important;
        }

        .share-modal.show {
            display: flex !important;
        }

        .order-form {
            background: var(--color-white) !important;
            border-radius: 16px !important;
            padding: 32px !important;
            width: 100% !important;
            max-width: 380px !important;
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15) !important;
            transform: translateY(20px) !important;
            transition: transform 0.3s ease !important;
            font-family: var(--font-family-ui) !important;
        }

        .order-modal.show .order-form {
            transform: translateY(0) !important;
        }

        .order-form h3 {
            margin: 0 0 28px 0 !important;
            font-size: 20px !important;
            font-weight: 600 !important;
            color: var(--color-charcoal) !important;
            text-align: center !important;
            letter-spacing: -0.01em !important;
        }

        .form-group {
            margin-bottom: 20px !important;
        }

        .form-group label {
            display: block !important;
            margin-bottom: 8px !important;
            font-weight: 500 !important;
            color: var(--color-text-secondary) !important;
            font-size: 14px !important;
            letter-spacing: -0.01em !important;
        }

        .form-group input,
        .form-group select {
            width: 100% !important;
            padding: 14px 16px !important;
            border: 1.5px solid var(--color-border-muted) !important;
            border-radius: 10px !important;
            font-size: 15px !important;
            box-sizing: border-box !important;
            background: #fafafa !important;
            transition: all 0.2s ease !important;
            font-family: inherit !important;
        }

        .form-group input::placeholder {
            color: #9ca3af !important;
        }

        /* Ocultar flechitas de input number */
        input[type="number"]::-webkit-outer-spin-button,
        input[type="number"]::-webkit-inner-spin-button {
            -webkit-appearance: none !important;
            margin: 0 !important;
        }

        input[type="number"] {
            -moz-appearance: textfield !important;
        }

        /* Estilo especial para campo de monto */
        #cash-amount {
            font-size: 16px !important;
            font-weight: 500 !important;
            letter-spacing: 0.5px !important;
            text-align: right !important;
        }

        .form-group input:focus,
        .form-group select:focus {
            outline: none !important;
            border-color: var(--color-info) !important;
            background: var(--color-white) !important;
            box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.1) !important;
            transform: translateY(-1px) !important;
        }

        /* Checkbox minimalista */
        .form-group label input[type="checkbox"] {
            width: 18px !important;
            height: 18px !important;
            accent-color: var(--color-info) !important;
            margin-right: 8px !important;
            cursor: pointer !important;
        }

        /* Campo de efectivo */
        #cash-amount-group {
            display: none !important;
            overflow: hidden !important;
            transition: all 0.3s ease !important;
        }

        #cash-amount-group.show {
            display: block !important;
            animation: fadeInUp 0.3s ease !important;
        }

        @keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(10px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        /* Campo deshabilitado */
        #delivery-address:disabled {
            background: linear-gradient(135deg, var(--color-surface-slate) 0%, var(--color-surface-slate-2) 100%) !important;
            color: var(--color-text-slate) !important;
            border-color: #cbd5e1 !important;
            cursor: not-allowed !important;
        }

        /* Botones elegantes */
        .form-buttons {
            display: flex !important;
            gap: 16px !important;
            margin-top: 14px !important;
        }

        .btn-cancel,
        .btn-send {
            flex: 1 !important;
            padding: 14px 20px !important;
            border: none !important;
            border-radius: 10px !important;
            font-weight: 600 !important;
            font-size: 15px !important;
            cursor: pointer !important;
            transition: all 0.2s ease !important;
            font-family: inherit !important;
            letter-spacing: -0.01em !important;
        }

        .btn-cancel {
            background: var(--color-surface-slate) !important;
            color: var(--color-text-slate) !important;
            border: 1.5px solid #e2e8f0 !important;
        }

        .btn-cancel:hover {
            background: var(--color-surface-slate-2) !important;
            border-color: #cbd5e1 !important;
            transform: translateY(-1px) !important;
        }

        .btn-send {
            background: linear-gradient(135deg, var(--color-success) 0%, #16a34a 100%) !important;
            color: var(--color-white) !important;
            box-shadow: 0 4px 12px rgba(34, 197, 94, 0.3) !important;
        }

        .btn-send:hover {
            background: linear-gradient(135deg, #16a34a 0%, #15803d 100%) !important;
            transform: translateY(-2px) !important;
            box-shadow: 0 6px 16px rgba(34, 197, 94, 0.4) !important;
        }

        .btn-send:active {
            transform: translateY(0) !important;
        }

        /* RESPONSIVE - Carrito centrado en móviles */
        @media (max-width: 768px) {
            .cart-container {
                width: 95% !important;
                max-width: none !important;
                left: 50% !important;
                transform: translateX(-50%) !important;
            }
            
            .cart-container.hidden {
                transform: translateX(-50%) translateY(calc(100% + 70px)) !important;
            }
            
            /* Header responsive */
            .catalog-header {
                padding: 12px 1rem !important;
            }
            
            .header-right {
                gap: 8px !important;
            }
            
            .business-name {
                font-size: 16px !important;
            }
            

            
            .share-btn {
                width: 32px !important;
                height: 32px !important;
                padding: 6px !important;
            }
            
            .share-btn svg {
                width: 16px !important;
                height: 16px !important;
            }
            
            /* Welcome cart responsive */
            .welcome-cart {
                padding: 20px 16px !important;
            }
            
            .welcome-message {
                font-size: 15px !important;
            }
            
            .welcome-instruction {
                font-size: 13px !important;
            }
            
            /* Clear cart button responsive */
            .clear-cart-btn {
                font-size: 10px !important;
            }
            
            /* Confirm modal responsive */
            .confirm-content {
                margin: 16px !important;
            }
            
            .confirm-header {
                padding: 16px 20px 12px 20px !important;
            }
            
            .confirm-header h4 {
                font-size: 16px !important;
            }
            
            .confirm-body {
                padding: 12px 20px !important;
            }
            
            .confirm-footer {
                padding: 12px 20px 16px 20px !important;
            }
            
            /* Business logo responsive */
            .business-logo {
                max-height: 40px !important;
                max-width: 100px !important;
                height: 40px !important;
                width: 100px !important;
                object-fit: contain !important;
            }

            /* Product zones responsive */
           
            
            .product-name {
                font-size: 11px !important;
            }
            
            .product-price {
                font-size: 10px !important;
            }

            /* Modal responsive */
            .order-form {
                padding: 24px !important;
                margin: 16px !important;
            }
            
            .form-buttons {
                flex-direction: column !important;
                gap: 12px !important;
            }
        }

        /* Pedido en dos pasos */
        #order-modal .order-form {
            max-height: calc(100vh - 32px) !important;
            overflow-y: auto !important;
            overscroll-behavior: contain !important;
        }

        #order-modal .order-form h3 {
            margin-bottom: 16px !important;
        }

        #order-modal .order-step-progress {
            display: flex !important;
            align-items: center !important;
            margin: 0 0 24px !important;
        }

        #order-modal .order-step-indicator {
            display: inline-flex !important;
            align-items: center !important;
            gap: 7px !important;
            color: var(--color-text-muted) !important;
            font-size: 12px !important;
            font-weight: 600 !important;
            white-space: nowrap !important;
        }

        #order-modal .order-step-number {
            display: inline-flex !important;
            align-items: center !important;
            justify-content: center !important;
            width: 26px !important;
            height: 26px !important;
            border: 1.5px solid var(--color-border-muted) !important;
            border-radius: 999px !important;
            background: var(--color-surface-muted) !important;
            color: var(--color-text-muted) !important;
            transition: all 0.2s ease !important;
        }

        #order-modal .order-step-indicator.is-active,
        #order-modal .order-step-indicator.is-complete {
            color: var(--color-charcoal) !important;
        }

        #order-modal .order-step-indicator.is-active .order-step-number,
        #order-modal .order-step-indicator.is-complete .order-step-number {
            border-color: var(--color-success) !important;
            background: var(--color-success) !important;
            color: var(--color-white) !important;
        }

        #order-modal .order-step-divider {
            flex: 1 1 auto !important;
            height: 1.5px !important;
            min-width: 18px !important;
            margin: 0 10px !important;
            background: var(--color-border-muted) !important;
        }

        #order-modal .order-form-step {
            display: none !important;
        }

        #order-modal .order-form-step.is-active {
            display: block !important;
            animation: fadeInUp 0.2s ease !important;
        }

        #order-modal .form-group small {
            display: block !important;
            margin-top: 6px !important;
            font-size: 12px !important;
            line-height: 1.45 !important;
            color: var(--color-text-muted) !important;
        }

        #order-modal .order-step-actions,
        #order-modal [data-order-step="2"] > .form-buttons {
            flex-direction: row !important;
        }

        @media (max-width: 480px) {
            #order-modal {
                padding: 8px !important;
            }

            #order-modal .order-form {
                max-height: calc(100vh - 16px) !important;
                margin: 0 !important;
                padding: 22px !important;
            }

            #order-modal .order-step-label {
                font-size: 11px !important;
            }
        }

        /* MODAL PARA EDITAR/CREAR PUNTO DE RETIRO */
        .pickup-point-modal {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.6);
            display: none;
            align-items: center;
            justify-content: center;
            z-index: 10000;
            padding: 20px;
        }
        
        .pickup-point-modal.show {
            display: flex;
        }
        
        .pickup-point-modal-content {
            background: var(--color-white);
            border-radius: 12px;
            padding: 24px;
            max-width: 500px;
            width: 100%;
            max-height: 90vh;
            overflow-y: auto;
        }
        
        .pickup-point-modal h3 {
            margin: 0 0 16px 0;
            color: var(--color-text-secondary);
        }
        
        .pickup-point-form .config-group {
            margin-bottom: 16px;
        }
        
        .pickup-point-form label {
            display: block;
            margin-bottom: 4px;
            font-weight: 500;
            color: var(--color-text-secondary);
        }
        
        .pickup-point-form input,
        .pickup-point-form textarea {
            width: 100%;
            padding: 8px 12px;
            border: 1px solid #d1d5db;
            border-radius: 6px;
            font-size: 0.875rem;
        }
        
        .pickup-point-form textarea {
            resize: vertical;
            min-height: 60px;
        }
        
        .pickup-point-form .form-buttons {
            display: flex;
            gap: 12px;
            justify-content: flex-end;
            margin-top: 20px;
        }
        
        /* ========================================
           BOTTOM SHEET - SISTEMA DE VARIANTES
           ======================================== */
        
        /* OVERLAY */
        .bs-overlay {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.4);
            opacity: 0;
            visibility: hidden;
            transition: all 0.3s ease;
            z-index: 100;
        }
        
        .bs-overlay.active {
            opacity: 1;
            visibility: visible;
        }

        .order-antispam-field {
            position: absolute !important;
            left: -10000px !important;
            width: 1px !important;
            height: 1px !important;
            overflow: hidden !important;
            opacity: 0 !important;
            pointer-events: none !important;
        }

        .order-push-settings {
            display: grid;
            gap: 10px;
            margin-top: 20px;
            padding: 18px;
            border: 1px solid rgba(148, 163, 184, 0.35);
            border-radius: 14px;
            background: rgba(248, 250, 252, 0.72);
        }

        .order-push-settings-copy {
            display: grid;
            gap: 4px;
        }

        .order-push-settings-copy strong {
            color: var(--color-text-primary, #111827);
            font-size: 0.95rem;
        }

        .order-push-settings-copy span,
        .order-push-privacy,
        .order-push-status {
            color: var(--color-text-secondary, #64748b);
            font-size: 0.8rem;
            line-height: 1.45;
        }

        .order-push-toggle {
            width: 100%;
            min-height: 44px;
            padding: 10px 16px;
            border: 1px solid transparent;
            border-radius: 10px;
            background: var(--accent-color, #22c55e);
            color: var(--accent-contrast-color, #ffffff);
            font: inherit;
            font-weight: 700;
            cursor: pointer;
            transition: opacity 0.2s ease, transform 0.2s ease, background 0.2s ease;
        }

        .order-push-toggle:hover:not(:disabled) {
            transform: translateY(-1px);
        }

        .order-push-toggle:disabled {
            cursor: not-allowed;
            opacity: 0.58;
        }

        .order-push-toggle.is-active {
            border-color: rgba(148, 163, 184, 0.5);
            background: transparent;
            color: var(--color-text-primary, #111827);
        }

        .order-push-status:empty {
            display: none;
        }

        .order-push-status.is-success {
            color: #15803d;
            font-weight: 600;
        }

        .order-push-status.is-error {
            color: #b91c1c;
            font-weight: 600;
        }

        .order-push-ios-help {
            padding: 10px 12px;
            border-radius: 9px;
            background: rgba(245, 158, 11, 0.12);
            color: #92400e;
            font-size: 0.8rem;
            line-height: 1.45;
        }

        .product-zone.external-product .external-chevron-icon {
            display: inline-flex !important;
            align-items: center !important;
            justify-content: center !important;
            color: var(--accent-contrast-color, #111827) !important;
            font-family: Arial, Helvetica, sans-serif !important;
            font-size: 24px !important;
            font-weight: 700 !important;
            line-height: 1 !important;
            text-shadow: none !important;
            transform: translate(1px, -1px);
        }

        /* Producto simple: fotos generales o alternativas elegibles. */
        #product-modal .pm-simple-photo-mode {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 10px;
            margin: 0 0 14px;
        }

        #product-modal .pm-simple-photo-mode-card {
            display: grid;
            gap: 4px;
            min-width: 0;
            padding: 12px 13px;
            border: 1px solid var(--color-border-muted, #e5e7eb);
            border-radius: 10px;
            background: var(--color-surface-base, #fff);
            color: var(--color-text-primary, #1d1d1f);
            text-align: left;
            cursor: pointer;
            transition: border-color .18s ease, background .18s ease, box-shadow .18s ease;
        }

        #product-modal .pm-simple-photo-mode-card strong {
            font-size: 13px;
            line-height: 1.3;
        }

        #product-modal .pm-simple-photo-mode-card span {
            color: var(--color-text-muted, #6b7280);
            font-size: 11px;
            line-height: 1.4;
        }

        #product-modal .pm-simple-photo-mode-card.selected {
            border-color: var(--accent-color, #22c55e);
            background: color-mix(in srgb, var(--accent-color, #22c55e) 8%, var(--color-surface-base, #fff));
            box-shadow: 0 0 0 1px var(--accent-color, #22c55e);
        }

        #product-modal .pm-simple-photo-options {
            display: grid;
            gap: 10px;
            margin-top: 16px;
            padding: 14px;
            border: 1px solid var(--color-border-muted, #e5e7eb);
            border-radius: 12px;
            background: var(--color-surface-muted, #f9fafb);
        }

        #product-modal .pm-simple-photo-options-heading {
            display: grid;
            gap: 3px;
        }

        #product-modal .pm-simple-photo-options-heading > div:first-child {
            display: grid;
            gap: 3px;
        }

        #product-modal .pm-simple-photo-options-heading strong {
            color: var(--color-text-primary, #1d1d1f);
            font-size: 13px;
        }

        #product-modal .pm-simple-photo-options-heading strong span {
            color: var(--color-text-muted, #6b7280);
            font-size: 10px;
            font-weight: 400;
        }

        #product-modal .pm-simple-photo-options-heading p,
        #product-modal .pm-simple-photo-options-empty {
            margin: 0;
            color: var(--color-text-muted, #6b7280);
            font-size: 11px;
            line-height: 1.45;
        }

        #product-modal .pm-simple-options-product-context {
            display: grid;
            gap: 2px;
            margin-top: 7px;
            padding: 8px 10px;
            border-left: 3px solid var(--accent-color, #22c55e);
            background: var(--color-surface-muted, #f8fafc);
        }

        #product-modal .pm-simple-options-product-context > span {
            color: var(--color-text-muted, #6b7280);
            font-size: 8px;
            font-weight: 700;
            letter-spacing: .05em;
            text-transform: uppercase;
        }

        #product-modal .pm-simple-options-product-context > strong {
            min-width: 0;
            overflow-wrap: anywhere;
            font-size: 11px;
            line-height: 1.35;
        }

        #product-modal .pm-simple-add-option {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 5px;
            width: fit-content;
            min-height: 34px;
            padding: 7px 11px;
            border: 1px solid color-mix(in srgb, var(--accent-color, #22c55e) 55%, var(--color-border-muted, #dfe3ea));
            border-radius: 9px;
            background: var(--color-surface-base, #fff);
            color: var(--accent-color, #22c55e);
            font-size: 10px;
            font-weight: 700;
            cursor: pointer;
            margin-top: 10px;
        }

        #product-modal .pm-simple-add-option.is-empty {
            display: grid;
            justify-items: start;
            width: 100%;
            min-height: 58px;
            padding: 11px 12px;
            border-style: dashed;
            text-align: left;
        }

        #product-modal .pm-simple-add-option.is-empty span {
            color: var(--color-text-muted, #6b7280);
            font-size: 9px;
            font-weight: 400;
        }

        #product-modal .pm-simple-photo-choice-row {
            display: grid;
            grid-template-columns: 62px minmax(0, 1.4fr) minmax(130px, .8fr);
            gap: 10px;
            align-items: end;
            padding-top: 10px;
            border-top: 1px solid var(--color-border-muted, #e5e7eb);
        }

        #product-modal .pm-simple-photo-choice-thumb {
            position: relative;
            align-self: stretch;
            min-height: 58px;
            border: 1px solid var(--color-border-muted, #e5e7eb);
            border-radius: 8px;
            overflow: hidden;
            background: var(--color-surface-base, #fff);
        }

        #product-modal .pm-simple-photo-choice-media {
            display: grid;
            gap: 5px;
            align-content: start;
        }

        #product-modal .pm-simple-option-photo-note,
        #product-modal .pm-simple-option-photo-action {
            width: 66px;
            color: var(--color-text-muted, #6b7280);
            font-size: 8px;
            line-height: 1.25;
            text-align: center;
        }

        #product-modal .pm-simple-option-photo-action {
            padding: 4px 2px;
            border: 0;
            background: transparent;
            color: var(--accent-color, #22c55e);
            font-weight: 700;
            cursor: pointer;
        }

        #product-modal .pm-simple-option-photo-action:disabled {
            opacity: .45;
            cursor: not-allowed;
        }

        #product-modal .pm-simple-photo-choice-thumb img {
            display: block;
            width: 100%;
            height: 100%;
            min-height: 58px;
            object-fit: cover;
        }

        #product-modal .pm-simple-photo-choice-thumb > span {
            display: grid;
            place-items: center;
            height: 100%;
            padding: 6px;
            color: var(--color-text-muted, #6b7280);
            font-size: 9px;
            text-align: center;
        }

        #product-modal .pm-simple-photo-choice-thumb small {
            position: absolute;
            right: 3px;
            bottom: 3px;
            padding: 2px 4px;
            border-radius: 4px;
            background: rgba(17, 24, 39, .78);
            color: #fff;
            font-size: 8px;
            line-height: 1.2;
        }

        #product-modal .pm-simple-photo-choice-name,
        #product-modal .pm-simple-photo-choice-color {
            display: grid;
            gap: 5px;
            min-width: 0;
        }

        #product-modal .pm-simple-photo-choice-name > span,
        #product-modal .pm-simple-photo-choice-color > span {
            color: var(--color-text-secondary, #374151);
            font-size: 10px;
            font-weight: 600;
        }

        #product-modal .pm-simple-photo-choice-color > span small {
            font-weight: 400;
        }

        #product-modal .pm-simple-photo-choice-name input,
        #product-modal .pm-simple-photo-choice-color select {
            width: 100%;
            min-width: 0;
            min-height: 38px;
        }

        #product-modal .pm-simple-photo-choice-color {
            grid-template-columns: minmax(0, 1fr) 36px;
        }

        #product-modal .pm-simple-photo-choice-color > span {
            grid-column: 1 / -1;
        }

        #product-modal .pm-simple-photo-choice-color input[type="color"] {
            width: 36px;
            height: 38px;
            padding: 3px;
            border: 1px solid var(--color-border-muted, #e5e7eb);
            border-radius: 7px;
            background: var(--color-surface-base, #fff);
        }

        #product-modal .pm-simple-photo-options {
            margin-top: 12px;
        }

        #product-modal .pm-simple-photo-choice-row {
            grid-template-columns: 66px minmax(0, 1fr);
            align-items: start;
            padding: 12px;
            border: 1px solid var(--color-border-muted, #e5e7eb);
            border-radius: 12px;
            background: var(--color-surface-base, #fff);
            transition: border-color .18s ease, box-shadow .18s ease;
        }

        #product-modal .pm-simple-photo-choice-row.is-incomplete {
            border-color: #ef4444;
            box-shadow: 0 0 0 2px color-mix(in srgb, #ef4444 18%, transparent);
        }

        #product-modal .pm-simple-photo-choice-thumb {
            align-self: start;
            width: 66px;
            height: 66px;
            min-height: 66px;
        }

        #product-modal .pm-simple-photo-choice-thumb img {
            min-height: 66px;
            object-position: 50% 50%;
        }

        #product-modal .pm-simple-photo-choice-thumb small {
            display: none;
        }

        #product-modal .pm-simple-photo-choice-body {
            display: grid;
            gap: 10px;
            min-width: 0;
        }

        #product-modal .pm-simple-photo-choice-topline {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 10px;
            padding-bottom: 7px;
            border-bottom: 1px solid var(--color-border-muted, #e5e7eb);
        }

        #product-modal .pm-simple-photo-choice-topline strong {
            color: var(--color-text-primary, #1f2937);
            font-size: 11px;
        }

        #product-modal .pm-simple-photo-choice-topline button {
            padding: 3px 0;
            border: 0;
            background: transparent;
            color: #dc2626;
            font-size: 9px;
            font-weight: 600;
            cursor: pointer;
        }

        #product-modal .pm-simple-photo-choice-name > span {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 8px;
            font-size: 11px;
        }

        #product-modal .pm-simple-photo-choice-name > span small {
            flex: 0 0 auto;
            padding: 3px 6px;
            border-radius: 999px;
            background: var(--color-surface-muted, #eef2f7);
            color: var(--color-text-muted, #64748b);
            font-size: 8px;
            font-weight: 600;
        }

        #product-modal .pm-simple-photo-choice-name > small {
            color: var(--color-text-muted, #6b7280);
            font-size: 9px;
            font-weight: 400;
            line-height: 1.35;
        }

        #product-modal label.pm-simple-photo-color-toggle {
            display: flex !important;
            align-items: flex-start;
            justify-self: stretch;
            gap: 9px;
            width: 100%;
            padding: 9px 10px;
            border: 1px solid var(--color-border-muted, #e5e7eb);
            border-radius: 9px;
            background: var(--color-surface-muted, #f9fafb);
            color: var(--color-text-secondary, #374151);
            cursor: pointer;
        }

        #product-modal .pm-simple-photo-color-toggle input {
            width: 16px;
            height: 16px;
            flex: 0 0 16px;
            margin: 1px 0 0;
            accent-color: var(--accent-color, #22c55e);
        }

        #product-modal .pm-simple-photo-color-toggle > span {
            display: grid;
            gap: 2px;
            min-width: 0;
        }

        #product-modal .pm-simple-photo-color-toggle strong {
            color: var(--color-text-primary, #1f2937);
            font-size: 10px;
            line-height: 1.3;
        }

        #product-modal .pm-simple-photo-color-toggle small {
            color: var(--color-text-muted, #6b7280);
            font-size: 9px;
            font-weight: 400;
            line-height: 1.35;
        }

        #product-modal .pm-simple-photo-color-panel {
            display: grid;
            gap: 8px;
            padding: 9px;
            border: 1px solid var(--color-border-muted, #e5e7eb);
            border-radius: 9px;
            background: var(--color-surface-muted, #f9fafb);
        }

        #product-modal .pm-simple-photo-color-presets {
            display: flex;
            flex-wrap: wrap;
            gap: 6px;
        }

        #product-modal .pm-simple-photo-color-presets button {
            display: inline-flex;
            align-items: center;
            gap: 5px;
            min-height: 30px;
            padding: 5px 8px;
            border: 1px solid var(--color-border-muted, #dfe3ea);
            border-radius: 7px;
            background: var(--color-surface-base, #fff);
            color: var(--color-text-primary, #1f2937);
            font-size: 9px;
            cursor: pointer;
        }

        #product-modal .pm-simple-photo-color-presets button.selected {
            border-color: var(--accent-color, #22c55e);
            box-shadow: 0 0 0 1px var(--accent-color, #22c55e);
        }

        #product-modal .pm-simple-photo-color-presets i,
        #product-modal .pm-simple-photo-client-preview i {
            width: 14px;
            height: 14px;
            flex: 0 0 14px;
            border: 1px solid color-mix(in srgb, var(--color-text-primary, #1f2937) 22%, transparent);
            border-radius: 4px;
            background: var(--option-color);
        }

        #product-modal .pm-simple-photo-custom-color {
            display: flex;
            align-items: center;
            gap: 8px;
            color: var(--color-text-muted, #64748b);
            font-size: 9px;
        }

        #product-modal .pm-simple-photo-custom-color input {
            width: 38px;
            height: 34px;
            padding: 3px;
        }

        #product-modal .pm-simple-photo-client-preview {
            display: grid;
            gap: 8px;
            padding: 10px;
            border: 1px solid color-mix(in srgb, var(--accent-color, #22c55e) 38%, var(--color-border-muted, #e5e7eb));
            border-radius: 10px;
            background: color-mix(in srgb, var(--accent-color, #22c55e) 7%, var(--color-surface-base, #fff));
        }

        #product-modal .pm-simple-photo-client-preview > strong {
            color: var(--color-text-primary, #1f2937);
            font-size: 10px;
        }

        #product-modal .pm-simple-photo-client-preview > div {
            display: flex;
            flex-wrap: wrap;
            gap: 6px;
        }

        #product-modal .pm-simple-photo-client-preview span {
            display: inline-flex;
            align-items: center;
            gap: 5px;
            padding: 5px 8px;
            border: 1px solid var(--color-border-muted, #dfe3ea);
            border-radius: 7px;
            background: var(--color-surface-base, #fff);
            color: var(--color-text-primary, #1f2937);
            font-size: 9px;
            font-weight: 600;
        }

        #product-modal .pm-simple-photo-client-preview small {
            color: var(--color-text-muted, #6b7280);
            font-size: 9px;
        }

        #product-modal #simple-photo-options-editor + #simple-gallery-upload {
            margin-top: 10px;
        }

        @media (max-width: 560px) {
            #product-modal .pm-simple-photo-mode {
                grid-template-columns: repeat(2, minmax(0, 1fr));
            }

            #product-modal .pm-simple-photo-choice-row {
                grid-template-columns: 58px minmax(0, 1fr);
                align-items: start;
            }

            #product-modal .pm-simple-photo-choice-thumb {
                width: 58px;
                height: 58px;
                min-height: 58px;
            }
        }

        @media (max-width: 360px) {
            #product-modal .pm-simple-photo-mode {
                grid-template-columns: 1fr;
            }
        }

        /* Producto simple guiado: misma lógica, orden visual del prototipo. */
        body:not(.theme-negro):not(.theme-matrix) #product-modal .pm-simple-price-grid,
        body:not(.theme-negro):not(.theme-matrix) #product-modal .pm-product-price-grid {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 12px;
        }

        body:not(.theme-negro):not(.theme-matrix) #product-modal .pm-simple-photos-heading {
            margin-top: 18px;
            margin-bottom: 18px;
        }

        body:not(.theme-negro):not(.theme-matrix) #product-modal .pm-simple-photos-heading .section-title,
        body:not(.theme-negro):not(.theme-matrix) #product-modal .pm-simple-photos-heading .section-subtitle {
            margin-left: 0;
            margin-right: 0;
        }

        body:not(.theme-negro):not(.theme-matrix) #product-modal .pm-guided-simple .pm-simple-photo-mode-card {
            min-height: 96px;
            padding: 14px;
            border-radius: 13px;
        }

        body:not(.theme-negro):not(.theme-matrix) #product-modal .pm-guided-simple .pm-simple-photo-options {
            gap: 0;
            margin-top: 0;
            padding: 0;
            border: 0;
            border-radius: 0;
            background: transparent;
        }

        body:not(.theme-negro):not(.theme-matrix) #product-modal .pm-guided-simple .pm-simple-photo-options-heading {
            gap: 4px;
            padding: 0 0 12px;
            border-bottom: 1px solid var(--color-border-muted, #e5e7eb);
        }

        body:not(.theme-negro):not(.theme-matrix) #product-modal .pm-guided-simple .pm-simple-photo-choice-row {
            grid-template-columns: 64px minmax(0, 1fr);
            gap: 12px;
            padding: 14px 0;
            border: 0;
            border-bottom: 1px solid var(--color-border-muted, #e5e7eb);
            border-radius: 0;
            background: transparent;
            box-shadow: none;
        }

        body:not(.theme-negro):not(.theme-matrix) #product-modal .pm-guided-simple .pm-simple-photo-choice-thumb {
            width: 64px;
            height: 64px;
            min-height: 64px;
        }

        body:not(.theme-negro):not(.theme-matrix) #product-modal .pm-guided-simple .pm-simple-photo-choice-topline {
            padding-bottom: 5px;
        }

        body:not(.theme-negro):not(.theme-matrix) #product-modal .pm-guided-simple #simple-gallery-upload,
        body:not(.theme-negro):not(.theme-matrix) #product-modal .pm-guided-simple #simple-gallery-upload .pm-gallery-drop-btn {
            width: 100%;
        }

        body:not(.theme-negro):not(.theme-matrix) #product-modal .pm-guided-simple #simple-gallery-upload .pm-gallery-drop-btn {
            display: grid;
            place-items: center;
            gap: 6px;
            min-height: 104px;
            padding: 18px 14px;
            border: 1.5px dashed color-mix(in srgb, var(--accent-color, #16a34a) 70%, #cbd5e1);
            border-radius: 14px;
            background: color-mix(in srgb, var(--accent-color, #16a34a) 3%, #fff);
            color: var(--color-text-primary, #111827);
        }

        body:not(.theme-negro):not(.theme-matrix) #product-modal .pm-guided-simple #simple-gallery-upload .pm-gallery-drop-icon {
            display: grid;
            place-items: center;
            color: var(--accent-color, #16a34a);
        }

        body:not(.theme-negro):not(.theme-matrix) #product-modal .pm-guided-simple #simple-gallery-upload .pm-gallery-drop-btn strong,
        body:not(.theme-negro):not(.theme-matrix) #product-modal .pm-guided-simple #simple-gallery-upload .pm-gallery-drop-btn small {
            display: block;
        }

        body:not(.theme-negro):not(.theme-matrix) #product-modal .pm-guided-simple #simple-gallery-upload .pm-gallery-drop-btn strong {
            font-size: 14px;
            font-weight: 700;
        }

        body:not(.theme-negro):not(.theme-matrix) #product-modal .pm-guided-simple #simple-gallery-upload .pm-gallery-drop-btn small {
            color: var(--color-text-muted, #6b7280);
            font-size: 10px;
        }

        body:not(.theme-negro):not(.theme-matrix) #product-modal .pm-guided-simple #simple-gallery-upload.is-choice-upload .pm-gallery-drop-btn {
            grid-template-columns: 22px auto;
            min-height: 104px;
            padding: 11px 14px;
        }

        body:not(.theme-negro):not(.theme-matrix) #product-modal .pm-guided-simple #simple-gallery-upload.is-choice-upload .pm-gallery-drop-btn small {
            display: none;
        }

        /* Producto simple: una decisión explícita y el mismo lenguaje de
           títulos, marcadores y superficies de los demás pasos. */
        body:not(.theme-negro):not(.theme-matrix) #product-modal .pm-simple-offering-choices {
            display: grid;
            gap: 10px;
            margin-top: 20px;
        }

        body:not(.theme-negro):not(.theme-matrix) #product-modal .pm-simple-offering-card {
            grid-template-columns: 18px minmax(0, 1fr);
            gap: 12px;
            align-items: flex-start;
            padding: 14px;
            border-radius: 10px;
        }

        body:not(.theme-negro):not(.theme-matrix) #product-modal .pm-simple-offering-card > span {
            display: grid;
            gap: 4px;
        }

        body:not(.theme-negro):not(.theme-matrix) #product-modal .pm-simple-offering-card > span > strong {
            color: var(--color-text-primary, #111827);
            font-size: 13px;
            line-height: 1.35;
        }

        body:not(.theme-negro):not(.theme-matrix) #product-modal .pm-simple-offering-card > span > small {
            color: var(--color-text-muted, #6b7280);
            font-size: 10px;
            line-height: 1.5;
        }

        #product-modal .pm-simple-offering-radio {
            display: block;
            width: 16px;
            height: 16px;
            margin-top: 1px;
            border: 1px solid var(--color-border-strong, #cbd5e1);
            border-radius: 50%;
            background: transparent;
            box-shadow: inset 0 0 0 4px transparent;
            box-sizing: border-box;
        }

        body:not(.theme-negro):not(.theme-matrix) #product-modal .pm-simple-offering-card.is-selected {
            border-color: color-mix(in srgb, var(--accent-color, #ec4899) 62%, #cbd5e1);
            background: color-mix(in srgb, var(--accent-color, #ec4899) 6%, #fff);
            box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent-color, #ec4899) 30%, transparent);
        }

        #product-modal .pm-simple-offering-card.is-selected .pm-simple-offering-radio {
            border-color: var(--accent-color, #ec4899);
            background: var(--accent-color, #ec4899);
            box-shadow: inset 0 0 0 4px var(--color-surface-base, #fff);
        }

        body:not(.theme-negro):not(.theme-matrix) #product-modal .pm-simple-configuration-heading {
            margin: 10px 0 18px;
        }

        body:not(.theme-negro):not(.theme-matrix) #product-modal .pm-simple-configuration-heading .section-title {
            margin-bottom: 6px;
        }

        body:not(.theme-negro):not(.theme-matrix) #product-modal .pm-simple-configuration-heading .section-subtitle {
            margin-bottom: 0;
        }

        #product-modal .pm-guided-simple #simple-photo-options-editor[hidden] {
            display: none;
        }

        body:not(.theme-negro):not(.theme-matrix) #product-modal .pm-guided-simple .pm-simple-photo-choice-name input {
            min-height: 40px;
            padding: 9px 11px;
            border: 1px solid var(--color-border-muted, #d7dce3);
            border-radius: 8px;
            background: var(--color-surface-base, #fff);
            color: var(--color-text-primary, #111827);
            font-size: 12px;
            line-height: 1.35;
            outline: none;
            box-shadow: none;
            transition: border-color .16s ease, box-shadow .16s ease;
        }

        body:not(.theme-negro):not(.theme-matrix) #product-modal .pm-guided-simple .pm-simple-photo-choice-name input:focus {
            border-color: color-mix(in srgb, var(--accent-color, #ec4899) 58%, #cbd5e1);
            box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-color, #ec4899) 10%, transparent);
        }

        body:not(.theme-negro):not(.theme-matrix) #product-modal .pm-guided-simple .pm-simple-photo-choice-name input::placeholder {
            color: var(--color-text-muted, #9aa3b2);
            opacity: .82;
        }

        body:not(.theme-negro):not(.theme-matrix) #product-modal .pm-guided-simple .pm-simple-add-option,
        body:not(.theme-negro):not(.theme-matrix) #product-modal .pm-guided-simple .pm-simple-add-option.is-empty {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 100%;
            min-height: 44px;
            margin-top: 18px;
            padding: 10px 16px;
            border: 0;
            border-radius: 9px;
            background: color-mix(in srgb, var(--accent-color, #ec4899) 11%, #fff);
            color: color-mix(in srgb, var(--accent-color, #ec4899) 88%, #5f173a);
            font-size: 11px;
            font-weight: 600;
            text-align: center;
            box-shadow: none;
        }

        body:not(.theme-negro):not(.theme-matrix) #product-modal .pm-guided-simple #simple-client-preview[hidden] {
            display: none;
        }

        body:not(.theme-negro):not(.theme-matrix) #product-modal .pm-guided-simple .pm-simple-client-recap {
            gap: 9px;
            margin: 20px 0 0;
            padding: 13px;
            border-color: var(--color-border-muted, #dfe3ea);
            border-radius: 10px;
            background: var(--color-surface-muted, #f8fafc);
            box-shadow: none;
        }

        body:not(.theme-negro):not(.theme-matrix) #product-modal .pm-guided-simple .pm-simple-client-recap > small {
            color: var(--color-text-muted, #6b7280);
            font-size: 9px;
            font-weight: 600;
            letter-spacing: .04em;
        }

        body:not(.theme-negro):not(.theme-matrix) #product-modal .pm-guided-simple .pm-simple-client-product {
            display: flex;
            align-items: baseline;
            justify-content: space-between;
            gap: 12px;
            padding-bottom: 9px;
            border-bottom: 1px solid var(--color-border-muted, #e5e7eb);
        }

        body:not(.theme-negro):not(.theme-matrix) #product-modal .pm-guided-simple .pm-simple-client-product > strong {
            min-width: 0;
            color: var(--color-text-primary, #111827);
            font-size: 12px;
            font-weight: 600;
            line-height: 1.35;
        }

        body:not(.theme-negro):not(.theme-matrix) #product-modal .pm-guided-simple .pm-simple-client-product .is-empty,
        body:not(.theme-negro):not(.theme-matrix) #product-modal .pm-guided-simple .pm-simple-preview-empty {
            color: var(--color-text-muted, #8b95a5);
            font-weight: 500;
        }

        body:not(.theme-negro):not(.theme-matrix) #product-modal .pm-guided-simple .pm-simple-client-price {
            display: inline-flex;
            flex: 0 0 auto;
            align-items: baseline;
            gap: 5px;
            min-height: 0;
            padding: 0;
            border: 0;
            border-radius: 0;
            background: transparent;
            color: var(--color-text-primary, #111827);
            font-size: 12px;
            font-weight: 700;
        }

        body:not(.theme-negro):not(.theme-matrix) #product-modal .pm-guided-simple .pm-simple-client-price del {
            color: var(--color-text-muted, #94a3b8);
            font-size: 9px;
            font-weight: 500;
        }

        body:not(.theme-negro):not(.theme-matrix) #product-modal .pm-guided-simple :is(.pm-simple-preview-mode, .pm-simple-preview-empty) {
            margin: 0;
            color: var(--color-text-muted, #6b7280);
            font-size: 10px;
            line-height: 1.5;
        }

        body:not(.theme-negro):not(.theme-matrix) #product-modal .pm-guided-simple .pm-simple-client-recap > strong {
            font-size: 12px;
            font-weight: 600;
        }

        body:not(.theme-negro):not(.theme-matrix) #product-modal .pm-guided-simple .pm-simple-client-recap .pm-guided-fork-tags > span {
            min-height: 28px;
            padding: 5px 8px;
            font-size: 10px;
        }

        body:not(.theme-negro):not(.theme-matrix) #product-modal .pm-guided-simple .pm-simple-client-recap .pm-guided-fork-tags > span.is-placeholder {
            color: var(--color-text-muted, #8b95a5);
            border-style: dashed;
            font-weight: 500;
        }

        body:not(.theme-negro):not(.theme-matrix) #product-modal .pm-guided-simple .pm-simple-photos-heading {
            margin: 30px 0 18px;
            padding-top: 27px;
            border-top: 1px solid var(--color-border-muted, #e5e7eb);
        }

        body:not(.theme-negro):not(.theme-matrix) #product-modal .pm-guided-simple .pm-simple-photos-heading .section-title {
            margin: 0 0 7px;
            color: var(--color-text-primary, #111827);
            font-size: 13px;
            font-weight: 600;
            letter-spacing: 0;
            line-height: 1.4;
            text-transform: none;
        }

        body:not(.theme-negro):not(.theme-matrix) #product-modal .pm-guided-simple .pm-simple-photos-heading .section-subtitle {
            max-width: 340px;
            margin: 0;
            color: var(--color-text-muted, #6b7280);
            font-size: 11px;
            line-height: 1.55;
        }

        body:not(.theme-negro):not(.theme-matrix) #product-modal .pm-guided-simple #simple-gallery-upload .pm-gallery-drop-btn {
            min-height: 128px;
            border-color: var(--color-border-muted, #d7dce3);
            border-radius: 10px;
            background: transparent;
        }

        body:not(.theme-negro):not(.theme-matrix) #product-modal .pm-guided-simple #simple-gallery-upload .pm-gallery-drop-icon {
            color: var(--color-text-muted, #6b7280);
        }

        body:not(.theme-negro):not(.theme-matrix) #product-modal .pm-guided-simple #simple-gallery-upload .pm-gallery-drop-btn strong {
            font-size: 12px;
            font-weight: 600;
        }

        body:not(.theme-negro):not(.theme-matrix) #product-modal .pm-guided-simple #simple-gallery-upload .pm-gallery-drop-btn small {
            font-size: 9px;
            font-weight: 400;
        }

        @media (max-width: 520px) {
            body:not(.theme-negro):not(.theme-matrix) #product-modal .pm-simple-price-grid,
            body:not(.theme-negro):not(.theme-matrix) #product-modal .pm-product-price-grid {
                grid-template-columns: 1fr;
                gap: 0;
            }

            body:not(.theme-negro):not(.theme-matrix) #product-modal .pm-guided-simple .pm-simple-photos-heading {
                margin-top: 27px;
                padding-top: 24px;
            }

            body:not(.theme-negro):not(.theme-matrix) #product-modal .pm-guided-simple #simple-gallery-upload .pm-gallery-drop-btn {
                min-height: 120px;
            }
        }

        /* Flujo de opciones: la maqueta define la estructura; estos estilos
           conservan el lenguaje visual real del catálogo. */
        #product-modal .pm-step-marker {
            display: inline-flex;
            margin: 0 0 8px;
            padding: 4px 8px;
            border-radius: 999px;
            background: var(--color-surface-muted, #f3f4f6);
            color: var(--color-text-muted, #6b7280);
            font-size: 10px;
            font-weight: 700;
            letter-spacing: .03em;
        }

        #product-modal .pm-kind-intro,
        #product-modal .pm-choice-builder-heading,
        #product-modal .pm-option-color-title {
            display: flex;
            justify-content: space-between;
            gap: 10px;
            align-items: flex-start;
        }

        #product-modal .pm-kind-intro {
            display: grid;
            gap: 3px;
            margin-bottom: 10px;
            color: var(--color-text-primary, #111827);
            font-size: 13px;
        }

        #product-modal .pm-kind-intro span,
        #product-modal .pm-choice-builder-heading span,
        #product-modal .pm-option-color-title span {
            color: var(--color-text-muted, #6b7280);
            font-size: 11px;
            font-weight: 400;
            line-height: 1.4;
        }

        #product-modal .pm-option-value-intro > span {
            color: var(--color-text-muted, #6b7280);
            font-size: 10px;
            font-weight: 400;
            line-height: 1.4;
        }

        #product-modal .pm-option-value-intro {
            display: grid;
            gap: 2px;
            margin: 2px 0 7px;
        }

        #product-modal .pm-option-value-intro > strong {
            color: var(--color-text-primary, #111827);
            font-size: 11px;
            line-height: 1.35;
        }

        #product-modal .pm-kind-grid,
        #product-modal .pm-variant-photo-mode-grid {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 9px;
        }

        #product-modal .pm-kind-card,
        #product-modal .pm-variant-photo-mode-grid button {
            display: grid;
            gap: 4px;
            min-width: 0;
            padding: 12px;
            border: 1px solid var(--color-border-muted, #dfe3ea);
            border-radius: 10px;
            background: var(--color-surface-base, #fff);
            color: var(--color-text-primary, #111827);
            text-align: left;
            cursor: pointer;
            transition: border-color .18s ease, background .18s ease, box-shadow .18s ease;
        }

        #product-modal .pm-kind-card:hover,
        #product-modal .pm-variant-photo-mode-grid button:hover,
        #product-modal .pm-variant-photo-mode-grid button.selected {
            border-color: var(--accent-color, #22c55e);
            box-shadow: 0 0 0 1px var(--accent-color, #22c55e);
        }

        #product-modal .pm-kind-card strong,
        #product-modal .pm-variant-photo-mode-grid button strong {
            font-size: 12px;
            line-height: 1.3;
        }

        #product-modal .pm-kind-card span,
        #product-modal .pm-variant-photo-mode-grid button span {
            color: var(--color-text-muted, #6b7280);
            font-size: 10px;
            line-height: 1.35;
        }

        #product-modal .pm-variant-photo-mode {
            display: grid;
            gap: 9px;
            margin: 0 0 14px;
        }

        #product-modal .pm-variant-photo-mode > strong {
            color: var(--color-text-primary, #111827);
            font-size: 13px;
            line-height: 1.35;
        }

        #product-modal .pm-kind-choice[hidden],
        #product-modal .pm-choice-values[hidden],
        #product-modal .pm-choice-builder-heading[hidden],
        #product-modal .pm-option-color-tools[hidden] {
            display: none !important;
        }

        #product-modal .pm-choice-builder-heading {
            margin-bottom: 10px;
            padding: 11px 12px;
            border: 1px solid var(--color-border-muted, #dfe3ea);
            border-radius: 10px;
            background: var(--color-surface-muted, #f8fafc);
        }

        #product-modal .pm-choice-builder-heading > div:first-child {
            display: grid;
            gap: 3px;
        }

        #product-modal .pm-choice-heading-actions {
            display: flex;
            gap: 5px;
            flex: 0 0 auto;
        }

        #product-modal .pm-choice-heading-actions button {
            padding: 5px 7px;
            border: 0;
            background: transparent;
            color: var(--accent-color, #0ea5e9);
            font-size: 10px;
            cursor: pointer;
        }

        #product-modal #pm-option1-type,
        #product-modal #pm-option2-type {
            display: none !important;
        }

        #product-modal .pm-option-color-tools {
            display: grid;
            gap: 9px;
            margin: 0 0 10px;
            padding: 11px;
            border: 1px solid var(--color-border-muted, #dfe3ea);
            border-radius: 10px;
            background: var(--color-surface-muted, #f8fafc);
        }

        #product-modal .pm-option-color-title {
            display: grid;
            gap: 2px;
        }

        #product-modal .pm-option-color-presets {
            display: flex;
            flex-wrap: wrap;
            gap: 6px;
        }

        #product-modal .pm-option-color-choice {
            display: inline-flex;
            align-items: center;
            gap: 5px;
            min-height: 30px;
            padding: 5px 8px;
            border: 1px solid var(--color-border-muted, #dfe3ea);
            border-radius: 999px;
            background: var(--color-surface-base, #fff);
            color: var(--color-text-primary, #111827);
            font-size: 10px;
            cursor: pointer;
        }

        #product-modal .pm-option-color-choice i,
        #product-modal .pm-tag-color,
        #product-modal .pm-availability-choice i,
        #product-modal .pm-availability-row-card > strong i {
            width: 12px;
            height: 12px;
            flex: 0 0 12px;
            border: 1px solid color-mix(in srgb, var(--color-text-primary, #111827) 22%, transparent);
            border-radius: 50%;
            background: var(--option-color);
        }

        #product-modal .pm-option-color-choice.selected {
            border-color: var(--accent-color, #22c55e);
            background: color-mix(in srgb, var(--accent-color, #22c55e) 8%, var(--color-surface-base, #fff));
        }

        #product-modal .pm-option-custom-color {
            display: none;
            grid-template-columns: 40px minmax(0, 1fr);
            gap: 9px;
            align-items: center;
            color: var(--color-text-muted, #6b7280);
            font-size: 10px;
            cursor: pointer;
        }

        #product-modal .pm-option-custom-color.active {
            display: grid;
        }

        #product-modal .pm-option-custom-color input[type="color"] {
            width: 40px;
            height: 34px;
            padding: 3px;
            border: 1px solid var(--color-border-muted, #dfe3ea);
            border-radius: 7px;
            background: var(--color-surface-base, #fff);
        }

        #product-modal .pm-option-custom-color span,
        #product-modal .pm-option-custom-color strong,
        #product-modal .pm-option-custom-color small {
            display: block;
        }

        #product-modal .pm-option-custom-color strong {
            margin-bottom: 2px;
            color: var(--color-text-primary, #111827);
            font-size: 10px;
        }

        #product-modal .variant-tag {
            align-items: center;
        }

        #product-modal .pm-tag-color {
            display: inline-block;
            margin-right: 4px;
            vertical-align: -2px;
        }

        #product-modal .pm-single-option-ready,
        #product-modal .pm-availability-row-card {
            display: grid;
            gap: 8px;
            padding: 11px;
            border: 1px solid var(--color-border-muted, #dfe3ea);
            border-radius: 10px;
            background: var(--color-surface-base, #fff);
            color: var(--color-text-primary, #111827);
        }

        #product-modal .pm-single-option-ready span,
        #product-modal .pm-single-option-ready div {
            color: var(--color-text-muted, #6b7280);
            font-size: 11px;
        }

        #product-modal .pm-single-option-ready div {
            display: flex;
            flex-wrap: wrap;
            gap: 6px;
            align-items: center;
        }

        #product-modal .pm-single-option-ready div > span,
        #product-modal .pm-availability-row-card > strong,
        #product-modal .pm-availability-choice {
            display: inline-flex;
            align-items: center;
            gap: 5px;
        }

        #product-modal .pm-availability-summary {
            display: inline-flex;
            margin: 0 0 8px;
            padding: 5px 8px;
            border-radius: 999px;
            background: color-mix(in srgb, var(--accent-color, #22c55e) 10%, var(--color-surface-base, #fff));
            color: var(--color-text-secondary, #374151);
            font-size: 10px;
            font-weight: 600;
        }

        #product-modal .pm-availability-row-list {
            display: grid;
            gap: 8px;
        }

        #product-modal .pm-availability-options {
            display: flex;
            flex-wrap: wrap;
            gap: 7px;
        }

        #product-modal .pm-availability-choice {
            justify-content: space-between;
            min-height: 36px;
            padding: 7px 9px;
            border: 1px solid color-mix(in srgb, var(--color-success, #22c55e) 52%, var(--color-border-muted, #dfe3ea));
            border-radius: 8px;
            background: color-mix(in srgb, var(--color-success, #22c55e) 9%, var(--color-surface-base, #fff));
            color: var(--color-text-primary, #111827);
            font-size: 10px;
            cursor: pointer;
        }

        #product-modal .pm-availability-choice strong {
            color: color-mix(in srgb, var(--color-success, #22c55e) 72%, var(--color-text-primary, #111827));
            font-size: 9px;
        }

        #product-modal .pm-availability-choice.is-unavailable {
            border-color: var(--color-border-muted, #dfe3ea);
            background: var(--color-surface-muted, #f3f4f6);
            opacity: .72;
        }

        #product-modal .pm-availability-choice.is-unavailable strong {
            color: var(--color-text-muted, #6b7280);
        }

        #product-modal .pm-advanced-line {
            margin-top: 10px;
            border: 1px solid var(--color-border-muted, #dfe3ea);
            border-radius: 10px;
            background: var(--color-surface-base, #fff);
            overflow: hidden;
        }

        #product-modal .pm-advanced-toggle {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
            width: 100%;
            padding: 11px 12px;
            border: 0;
            background: transparent;
            color: var(--color-text-primary, #111827);
            font-size: 11px;
            font-weight: 600;
            line-height: 1.35;
            text-align: left;
            cursor: pointer;
        }

        #product-modal .pm-advanced-toggle small {
            color: var(--color-text-muted, #6b7280);
            font-weight: 400;
        }

        #product-modal .pm-advanced-toggle [data-toggle-label] {
            flex: 0 0 auto;
            color: var(--accent-color, #16a34a);
            font-size: 10px;
            font-weight: 700;
        }

        #product-modal .pm-advanced-content {
            padding: 12px;
            border-top: 1px solid var(--color-border-muted, #dfe3ea);
        }

        #product-modal .pm-advanced-content[hidden] {
            display: none !important;
        }

        #product-modal #pm-curva-grid {
            display: block;
        }

        #product-modal #pm-curva-grid > .curva-grid-single {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 8px;
        }

        #product-modal .curva-item {
            min-width: 0;
        }

        @media (max-width: 560px) {
            #product-modal .pm-kind-grid,
            #product-modal .pm-variant-photo-mode-grid {
                grid-template-columns: 1fr;
            }

            #product-modal .pm-choice-builder-heading {
                display: grid;
            }

            #product-modal .pm-choice-heading-actions {
                justify-content: flex-end;
            }
        }

        /* Ajuste de la maqueta aprobada en Default. Las reglas se aíslan del
           tema Negro y Matrix hasta que cada uno tenga su adaptación propia. */
        #product-modal .pm-gallery-drop-icon,
        #product-modal .pm-gallery-drop-btn small {
            display: none;
        }

        #product-modal .pm-gallery-drop-btn strong {
            font: inherit;
        }

        body:not(.theme-negro):not(.theme-matrix) #product-modal .pm-kind-grid {
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 10px;
        }

        body:not(.theme-negro):not(.theme-matrix) #product-modal .pm-kind-card {
            min-height: 84px;
            padding: 13px 14px;
            border-radius: 13px;
        }

        body:not(.theme-negro):not(.theme-matrix) #product-modal .pm-kind-card strong {
            font-size: 14px;
        }

        body:not(.theme-negro):not(.theme-matrix) #product-modal .pm-kind-card span {
            font-size: 11px;
        }

        body:not(.theme-negro):not(.theme-matrix) #product-modal .pm-choice-builder-heading {
            display: flex;
            align-items: flex-start;
            margin: 0 0 12px;
            padding: 0;
            border: 0;
            border-radius: 0;
            background: transparent;
        }

        body:not(.theme-negro):not(.theme-matrix) #product-modal .pm-choice-builder-heading > div:first-child {
            gap: 4px;
        }

        body:not(.theme-negro):not(.theme-matrix) #product-modal .pm-choice-builder-heading strong {
            color: var(--color-text-primary, #111827);
            font-size: 15px;
            line-height: 1.35;
        }

        body:not(.theme-negro):not(.theme-matrix) #product-modal .pm-choice-heading-actions button {
            padding: 2px 0 2px 8px;
            color: var(--accent-color, #0ea5e9);
            font-size: 11px;
            font-weight: 700;
        }

        body:not(.theme-negro):not(.theme-matrix) #product-modal .pm-option-color-tools {
            gap: 10px;
            margin: 0 0 10px;
            padding: 0;
            border: 0;
            border-radius: 0;
            background: transparent;
        }

        body:not(.theme-negro):not(.theme-matrix) #product-modal .pm-option-color-title {
            display: none;
        }

        body:not(.theme-negro):not(.theme-matrix) #product-modal .pm-option-color-choice {
            min-height: 34px;
            padding: 6px 10px;
            font-size: 11px;
        }

        body:not(.theme-negro):not(.theme-matrix) #product-modal .pm-color-selected-check {
            margin-right: -2px;
            color: var(--accent-color, #16a34a);
            font-size: 10px;
            line-height: 1;
        }

        body:not(.theme-negro):not(.theme-matrix) #product-modal .pm-choice-values:not([hidden]) {
            animation: pmDefaultChoiceEnter .24s ease both;
        }

        @keyframes pmDefaultChoiceEnter {
            from { opacity: 0; transform: translateY(5px); }
            to { opacity: 1; transform: translateY(0); }
        }

        body:not(.theme-negro):not(.theme-matrix) #product-modal .pm-guided-fork-tags > span {
            transition: border-color .18s ease, background .18s ease, color .18s ease, transform .18s ease;
        }

        body:not(.theme-negro):not(.theme-matrix) #product-modal .pm-guided-fork-tags > span.is-active {
            border-color: var(--accent-color, #22c55e);
            background: color-mix(in srgb, var(--accent-color, #22c55e) 9%, #fff);
            color: #172554;
            transform: translateY(-1px);
        }

        body:not(.theme-negro):not(.theme-matrix) #product-modal .pm-guided-fork-recap > .pm-guided-fork-quantity {
            display: grid;
            grid-template-columns: 34px 42px 34px;
            gap: 0;
            width: max-content;
            overflow: hidden;
            border: 1px solid #d7dce4;
            border-radius: 10px;
            background: #fff;
        }

        body:not(.theme-negro):not(.theme-matrix) #product-modal .pm-guided-fork-quantity > span,
        body:not(.theme-negro):not(.theme-matrix) #product-modal .pm-guided-fork-quantity > strong {
            display: grid;
            place-items: center;
            min-width: 0;
            min-height: 34px;
            padding: 0;
            border: 0;
            border-radius: 0;
            background: transparent;
            color: #334155;
            font-size: 13px;
        }

        body:not(.theme-negro):not(.theme-matrix) #product-modal .pm-guided-fork-quantity > span:first-child {
            border-right: 1px solid #e5e7eb;
        }

        body:not(.theme-negro):not(.theme-matrix) #product-modal .pm-guided-fork-quantity > span:last-child {
            border-left: 1px solid #e5e7eb;
            color: var(--accent-color, #16a34a);
        }

        body:not(.theme-negro):not(.theme-matrix) #product-modal .pm-guided-fork-quantity .is-pulsing {
            animation: pmForkPulse .22s ease;
        }

        @keyframes pmForkPulse {
            50% { transform: scale(1.06); }
        }

        body:not(.theme-negro):not(.theme-matrix) #product-modal .pm-primary-photo-assignment.pm-primary-photo-picker {
            display: grid;
            grid-template-columns: 60px minmax(0, 1fr);
            gap: 11px;
            align-items: center;
            padding: 11px;
        }

        body:not(.theme-negro):not(.theme-matrix) #product-modal .pm-primary-photo-source,
        body:not(.theme-negro):not(.theme-matrix) #product-modal .pm-primary-photo-source img,
        body:not(.theme-negro):not(.theme-matrix) #product-modal .pm-primary-photo-source .pm-primary-photo-placeholder {
            width: 60px;
            height: 60px;
        }

        body:not(.theme-negro):not(.theme-matrix) #product-modal .pm-primary-photo-source {
            overflow: hidden;
            border-radius: 9px;
            background: #edf1f6;
        }

        body:not(.theme-negro):not(.theme-matrix) #product-modal .pm-primary-photo-source img {
            display: block;
            object-fit: cover;
            object-position: 50% 50%;
        }

        body:not(.theme-negro):not(.theme-matrix) #product-modal .pm-general-photo-upload:not(.is-mapping),
        body:not(.theme-negro):not(.theme-matrix) #product-modal .pm-general-photo-upload:not(.is-mapping) .pm-gallery-upload {
            width: 100%;
        }

        body:not(.theme-negro):not(.theme-matrix) #product-modal .pm-general-photo-upload:not(.is-mapping) .pm-gallery-drop-btn {
            display: grid;
            place-items: center;
            gap: 6px;
            width: 100%;
            min-height: 104px;
            padding: 20px 16px;
            border: 1.5px dashed color-mix(in srgb, var(--accent-color, #16a34a) 72%, #cbd5e1);
            border-radius: 14px;
            background: color-mix(in srgb, var(--accent-color, #16a34a) 3%, #fff);
            color: var(--color-text-primary, #111827);
        }

        body:not(.theme-negro):not(.theme-matrix) #product-modal .pm-general-photo-upload:not(.is-mapping) .pm-gallery-drop-icon {
            display: grid;
            place-items: center;
            width: 30px;
            height: 30px;
            color: var(--accent-color, #16a34a);
        }

        body:not(.theme-negro):not(.theme-matrix) #product-modal .pm-gallery-drop-icon svg {
            width: 26px;
            height: 26px;
            fill: none;
            stroke: currentColor;
            stroke-width: 1.7;
            stroke-linecap: round;
            stroke-linejoin: round;
        }

        body:not(.theme-negro):not(.theme-matrix) #product-modal .pm-general-photo-upload:not(.is-mapping) .pm-gallery-drop-btn strong {
            display: block;
            font-size: 14px;
            font-weight: 700;
        }

        body:not(.theme-negro):not(.theme-matrix) #product-modal .pm-general-photo-upload:not(.is-mapping) .pm-gallery-drop-btn small {
            display: block;
            color: var(--color-text-muted, #6b7280);
            font-size: 10px;
            font-weight: 500;
        }

        body:not(.theme-negro):not(.theme-matrix) #product-modal .pm-general-photo-upload.is-mapping {
            grid-template-columns: 1fr;
            gap: 10px;
            padding: 12px;
        }

        body:not(.theme-negro):not(.theme-matrix) #product-modal .pm-general-photo-upload.is-mapping .pm-gallery-drop-btn {
            display: grid;
            place-items: center;
            gap: 5px;
            width: 100%;
            min-height: 104px;
            padding: 14px;
            border-color: color-mix(in srgb, var(--accent-color, #16a34a) 62%, #cbd5e1);
        }

        body:not(.theme-negro):not(.theme-matrix) #product-modal .pm-general-photo-upload.is-mapping .pm-gallery-drop-btn strong {
            color: inherit;
            font-size: 13px;
            font-weight: 700;
        }

        body:not(.theme-negro):not(.theme-matrix) #product-modal .pm-general-photo-upload.is-mapping .pm-gallery-drop-icon,
        body:not(.theme-negro):not(.theme-matrix) #product-modal .pm-general-photo-upload.is-mapping .pm-gallery-drop-btn small {
            display: block;
        }

        @media (max-width: 340px) {
            body:not(.theme-negro):not(.theme-matrix) #product-modal .pm-kind-grid {
                grid-template-columns: 1fr;
            }
        }

        @media (prefers-reduced-motion: reduce) {
            body:not(.theme-negro):not(.theme-matrix) #product-modal .pm-choice-values:not([hidden]),
            body:not(.theme-negro):not(.theme-matrix) #product-modal .pm-guided-fork-quantity .is-pulsing {
                animation: none;
            }
        }

        /* Negro y Matrix comparten el recorrido y la geometría aprobados. La
           paleta, el contraste, los radios y la tipografía siguen perteneciendo
           a cada archivo de tema. */
        body:is(.theme-negro, .theme-matrix) #product-modal .pm-product-modal-shell {
            display: flex;
            flex-direction: column;
            width: min(94vw, 440px) !important;
            height: min(720px, calc(100dvh - 32px));
            max-height: calc(100dvh - 32px) !important;
            padding: 0 !important;
            overflow: hidden !important;
            box-sizing: border-box;
        }

        body:is(.theme-negro, .theme-matrix) #product-modal .pm-product-modal-header {
            flex: 0 0 auto;
            min-height: 68px;
            margin: 0 !important;
            padding: 19px 24px 16px;
            border-bottom: 1px solid var(--pm-border, #3a4049);
            background: var(--pm-bg, #17191e);
            box-sizing: border-box;
        }

        body:is(.theme-negro, .theme-matrix) #product-modal .pm-product-container-active {
            display: flex !important;
            flex: 1 1 auto;
            flex-direction: column;
            min-height: 0;
            overflow: hidden;
        }

        body:is(.theme-negro, .theme-matrix) #product-modal :is(.product-modal-steps, .product-modal-steps-wrapper) {
            height: 100%;
            min-height: 0;
        }

        body:is(.theme-negro, .theme-matrix) #product-modal .product-modal-step {
            display: flex;
            flex-direction: column;
            height: 100%;
            min-height: 0;
            padding: 0 24px;
            box-sizing: border-box;
        }

        body:is(.theme-negro, .theme-matrix) #product-modal :is(
            .product-modal-step-content,
            .pm-product-container-active > .product-modal-step-content
        ) {
            flex: 1 1 auto;
            min-height: 0;
            max-height: none !important;
            padding: 20px 6px 20px 0 !important;
            overflow-x: hidden;
            overflow-y: auto !important;
            overscroll-behavior: contain;
            scrollbar-gutter: stable;
            scrollbar-width: thin;
            box-sizing: border-box;
        }

        body:is(.theme-negro, .theme-matrix) #product-modal .step-footer {
            position: static;
            z-index: 2;
            flex: 0 0 auto;
            margin: 0;
            padding: 14px 0 18px;
            border-top: 1px solid var(--pm-border, #3a4049);
            background: var(--pm-bg, #17191e);
        }

        body:is(.theme-negro, .theme-matrix) #product-modal .pm-product-container-active > .step-footer {
            margin: 0 24px;
        }

        body:is(.theme-negro, .theme-matrix) #product-modal :is(.pm-simple-price-grid, .pm-product-price-grid) {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 12px;
        }

        body:is(.theme-negro, .theme-matrix) #product-modal .pm-kind-grid {
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 10px;
        }

        body:is(.theme-negro, .theme-matrix) #product-modal .pm-kind-card {
            min-height: 84px;
            padding: 13px 14px;
        }

        body:is(.theme-negro, .theme-matrix) #product-modal .pm-choice-builder-heading {
            display: flex;
            align-items: flex-start;
            margin: 0 0 12px;
            padding: 0;
            border: 0 !important;
            background: transparent !important;
            box-shadow: none !important;
        }

        body:is(.theme-negro, .theme-matrix) #product-modal .pm-option-color-tools {
            gap: 10px;
            margin: 0 0 10px;
            padding: 0;
            border: 0 !important;
            background: transparent !important;
            box-shadow: none !important;
        }

        body:is(.theme-negro, .theme-matrix) #product-modal .pm-option-color-title {
            display: none;
        }

        body:is(.theme-negro, .theme-matrix) #product-modal .pm-option-color-choice {
            min-height: 34px;
            padding: 6px 10px;
            font-size: 11px;
        }

        body:is(.theme-negro, .theme-matrix) #product-modal .pm-simple-photos-heading {
            margin-top: 18px;
            margin-bottom: 18px;
        }

        body:is(.theme-negro, .theme-matrix) #product-modal .pm-simple-offering-choices {
            display: grid;
            gap: 10px;
            margin-top: 20px;
        }

        body:is(.theme-negro, .theme-matrix) #product-modal .pm-simple-offering-card {
            grid-template-columns: 18px minmax(0, 1fr);
            gap: 12px;
            align-items: flex-start;
            padding: 14px;
            border-color: var(--pm-border) !important;
            border-radius: 9px;
            background: var(--pm-surface-strong) !important;
            color: var(--pm-text) !important;
            box-shadow: none;
        }

        body:is(.theme-negro, .theme-matrix) #product-modal .pm-simple-offering-card > span {
            display: grid;
            gap: 4px;
        }

        body:is(.theme-negro, .theme-matrix) #product-modal .pm-simple-offering-card > span > strong {
            color: var(--pm-text) !important;
            font-size: 13px;
            line-height: 1.35;
        }

        body:is(.theme-negro, .theme-matrix) #product-modal .pm-simple-offering-card > span > small {
            color: var(--pm-muted) !important;
            font-size: 10px;
            line-height: 1.5;
        }

        body:is(.theme-negro, .theme-matrix) #product-modal .pm-simple-offering-card.is-selected {
            border-color: color-mix(in srgb, var(--accent-color) 65%, var(--pm-border)) !important;
            background: color-mix(in srgb, var(--accent-color) 9%, var(--pm-surface-strong)) !important;
            box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent-color) 32%, transparent);
        }

        body:is(.theme-negro, .theme-matrix) #product-modal .pm-simple-offering-radio {
            border-color: var(--pm-border);
        }

        body:is(.theme-negro, .theme-matrix) #product-modal .pm-simple-offering-card.is-selected .pm-simple-offering-radio {
            box-shadow: inset 0 0 0 4px var(--pm-surface-strong);
        }

        body:is(.theme-negro, .theme-matrix) #product-modal .pm-simple-configuration-heading {
            margin: 10px 0 18px;
        }

        body:is(.theme-negro, .theme-matrix) #product-modal .pm-simple-configuration-heading .section-title {
            margin-bottom: 6px;
        }

        body:is(.theme-negro, .theme-matrix) #product-modal .pm-simple-configuration-heading .section-subtitle {
            margin-bottom: 0;
        }

        body:is(.theme-negro, .theme-matrix) #product-modal .pm-guided-simple .pm-simple-photo-options {
            gap: 0;
            margin-top: 0;
            padding: 0;
            border: 0;
            background: transparent;
        }

        body:is(.theme-negro, .theme-matrix) #product-modal .pm-guided-simple .pm-simple-photo-options-heading {
            gap: 4px;
            padding: 0;
            border: 0;
        }

        body:is(.theme-negro, .theme-matrix) #product-modal .pm-guided-simple .pm-simple-photo-options-heading > div > strong {
            color: var(--pm-text);
            font-size: 13px;
            font-weight: 600;
            line-height: 1.4;
        }

        body:is(.theme-negro, .theme-matrix) #product-modal .pm-guided-simple .pm-simple-photo-options-heading p {
            max-width: 340px;
            margin-top: 6px;
            color: var(--pm-muted);
            font-size: 11px;
            line-height: 1.55;
        }

        body:is(.theme-negro, .theme-matrix) #product-modal .pm-guided-simple .pm-simple-photo-choice-name input {
            min-height: 40px;
            padding: 9px 11px;
            border: 1px solid var(--pm-border) !important;
            border-radius: 8px;
            background: var(--pm-surface-strong) !important;
            color: var(--pm-text) !important;
            font-size: 12px;
            line-height: 1.35;
            outline: none;
            box-shadow: none;
            transition: border-color .16s ease, box-shadow .16s ease;
        }

        body:is(.theme-negro, .theme-matrix) #product-modal .pm-guided-simple .pm-simple-photo-choice-name input:focus {
            border-color: color-mix(in srgb, var(--accent-color) 72%, var(--pm-border)) !important;
            box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-color) 13%, transparent);
        }

        body:is(.theme-negro, .theme-matrix) #product-modal .pm-guided-simple #simple-client-preview[hidden] {
            display: none;
        }

        body:is(.theme-negro, .theme-matrix) #product-modal .pm-guided-simple .pm-simple-client-recap {
            gap: 9px;
            margin: 20px 0 0;
            padding: 13px;
            border-color: var(--pm-border) !important;
            border-radius: 9px;
            background: var(--pm-surface-strong) !important;
            box-shadow: none !important;
        }

        body:is(.theme-negro, .theme-matrix) #product-modal .pm-guided-simple .pm-simple-client-product {
            display: flex;
            align-items: baseline;
            justify-content: space-between;
            gap: 12px;
            padding-bottom: 9px;
            border-bottom: 1px solid var(--pm-border);
        }

        body:is(.theme-negro, .theme-matrix) #product-modal .pm-guided-simple .pm-simple-client-product > strong,
        body:is(.theme-negro, .theme-matrix) #product-modal .pm-guided-simple .pm-simple-client-price {
            color: var(--pm-text) !important;
        }

        body:is(.theme-negro, .theme-matrix) #product-modal .pm-guided-simple .pm-simple-client-price {
            display: inline-flex;
            flex: 0 0 auto;
            align-items: baseline;
            gap: 5px;
            min-height: 0;
            padding: 0;
            border: 0 !important;
            border-radius: 0;
            background: transparent !important;
            font-size: 12px;
            font-weight: 700;
        }

        body:is(.theme-negro, .theme-matrix) #product-modal .pm-guided-simple .pm-simple-client-price del,
        body:is(.theme-negro, .theme-matrix) #product-modal .pm-guided-simple :is(.pm-simple-preview-mode, .pm-simple-preview-empty, .pm-simple-client-product .is-empty, .pm-simple-client-price.is-empty) {
            color: var(--pm-muted) !important;
        }

        body:is(.theme-negro, .theme-matrix) #product-modal .pm-guided-simple :is(.pm-simple-preview-mode, .pm-simple-preview-empty) {
            margin: 0;
            font-size: 10px;
            line-height: 1.5;
        }

        body:is(.theme-negro, .theme-matrix) #product-modal .pm-guided-simple .pm-simple-client-recap .pm-guided-fork-tags > span.is-placeholder {
            color: var(--pm-muted) !important;
            border-style: dashed !important;
            font-weight: 500;
            opacity: .82;
        }

        body:is(.theme-negro, .theme-matrix) #product-modal .pm-guided-simple .pm-simple-add-option,
        body:is(.theme-negro, .theme-matrix) #product-modal .pm-guided-simple .pm-simple-add-option.is-empty {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 100%;
            min-height: 44px;
            margin-top: 18px;
            padding: 10px 16px;
            border: 1px solid color-mix(in srgb, var(--accent-color) 42%, var(--pm-border));
            border-radius: 8px;
            background: color-mix(in srgb, var(--accent-color) 10%, var(--pm-surface));
            color: var(--accent-color);
            font-size: 11px;
            font-weight: 600;
            text-align: center;
            box-shadow: none;
        }

        body:is(.theme-negro, .theme-matrix) #product-modal .pm-guided-simple .pm-simple-photos-heading {
            margin: 30px 0 18px;
            padding-top: 27px;
            border-top: 1px solid var(--pm-border);
        }

        body:is(.theme-negro, .theme-matrix) #product-modal .pm-guided-simple .pm-simple-photos-heading .section-title {
            margin: 0 0 7px;
            font-size: 13px;
            font-weight: 600;
            letter-spacing: 0;
            line-height: 1.4;
            text-transform: none;
        }

        body:is(.theme-negro, .theme-matrix) #product-modal .pm-guided-simple .pm-simple-photos-heading .section-subtitle {
            max-width: 340px;
            margin: 0;
            font-size: 11px;
            line-height: 1.55;
        }

        body:is(.theme-negro, .theme-matrix) #product-modal .pm-guided-simple #simple-gallery-upload .pm-gallery-drop-btn {
            min-height: 128px;
            border-color: var(--pm-border) !important;
            border-radius: 9px;
            background: transparent !important;
        }

        body:is(.theme-negro, .theme-matrix) #product-modal .pm-guided-simple #simple-gallery-upload .pm-gallery-drop-icon {
            color: var(--pm-muted) !important;
            filter: none;
        }

        body:is(.theme-negro, .theme-matrix) #product-modal .pm-guided-simple .pm-simple-photo-choice-row {
            grid-template-columns: 64px minmax(0, 1fr);
            gap: 12px;
            padding: 14px 0;
            border-width: 0 0 1px !important;
            border-radius: 0 !important;
            background: transparent !important;
            box-shadow: none !important;
        }

        body:is(.theme-negro, .theme-matrix) #product-modal .pm-guided-simple .pm-simple-photo-choice-thumb {
            width: 64px;
            height: 64px;
            min-height: 64px;
        }

        body:is(.theme-negro, .theme-matrix) #product-modal .pm-primary-photo-assignment.pm-primary-photo-picker {
            display: grid;
            grid-template-columns: 60px minmax(0, 1fr);
            gap: 11px;
            align-items: center;
            padding: 11px;
        }

        body:is(.theme-negro, .theme-matrix) #product-modal :is(
            .pm-primary-photo-source,
            .pm-primary-photo-source img,
            .pm-primary-photo-source .pm-primary-photo-placeholder
        ) {
            width: 60px;
            height: 60px;
        }

        body:is(.theme-negro, .theme-matrix) #product-modal .pm-primary-photo-source {
            overflow: hidden;
        }

        body:is(.theme-negro, .theme-matrix) #product-modal .pm-primary-photo-source img {
            display: block;
            object-fit: cover;
            object-position: 50% 50%;
        }

        /* Los dos cargadores principales usan exactamente la misma caja. Los
           botones compactos asociados a cada color conservan su tamaño propio. */
        body:is(.theme-negro, .theme-matrix) #product-modal :is(
            .pm-guided-simple #simple-gallery-upload .pm-gallery-drop-btn,
            .pm-general-photo-upload .pm-gallery-drop-btn
        ) {
            display: grid;
            place-items: center;
            gap: 6px;
            width: 100%;
            min-height: 104px;
            padding: 16px 14px;
            border-style: dashed !important;
        }

        body:is(.theme-negro, .theme-matrix) #product-modal :is(
            .pm-guided-simple #simple-gallery-upload .pm-gallery-drop-icon,
            .pm-general-photo-upload .pm-gallery-drop-icon
        ) {
            display: grid;
            place-items: center;
        }

        body:is(.theme-negro, .theme-matrix) #product-modal :is(
            .pm-guided-simple #simple-gallery-upload .pm-gallery-drop-btn strong,
            .pm-guided-simple #simple-gallery-upload .pm-gallery-drop-btn small,
            .pm-general-photo-upload .pm-gallery-drop-btn strong,
            .pm-general-photo-upload .pm-gallery-drop-btn small
        ) {
            display: block;
        }

        body:is(.theme-negro, .theme-matrix) #product-modal :is(
            .pm-guided-simple #simple-gallery-upload .pm-gallery-drop-btn strong,
            .pm-general-photo-upload .pm-gallery-drop-btn strong
        ) {
            font-size: 13px;
            font-weight: 700;
        }

        body:is(.theme-negro, .theme-matrix) #product-modal :is(
            .pm-guided-simple #simple-gallery-upload .pm-gallery-drop-btn small,
            .pm-general-photo-upload .pm-gallery-drop-btn small
        ) {
            color: var(--pm-muted, #aeb7c4);
            font-size: 10px;
            font-weight: 500;
        }

        body:is(.theme-negro, .theme-matrix) #product-modal .pm-general-photo-upload.is-mapping {
            grid-template-columns: 1fr;
            gap: 10px;
            padding: 12px;
        }

        @media (max-width: 600px) {
            body:is(.theme-negro, .theme-matrix) #product-modal {
                align-items: center;
                padding: 6px;
                box-sizing: border-box;
            }

            body:is(.theme-negro, .theme-matrix) #product-modal .pm-product-modal-shell {
                width: calc(100vw - 12px) !important;
                height: calc(100dvh - 12px);
                max-height: calc(100dvh - 12px) !important;
            }

            body:is(.theme-negro, .theme-matrix) #product-modal .pm-product-modal-header {
                min-height: 62px;
                padding: 16px 18px 13px;
            }

            body:is(.theme-negro, .theme-matrix) #product-modal .product-modal-step {
                padding: 0 18px;
            }

            body:is(.theme-negro, .theme-matrix) #product-modal .pm-product-container-active > .step-footer {
                margin: 0 18px;
            }
        }

        @media (max-width: 520px) {
            body:is(.theme-negro, .theme-matrix) #product-modal :is(.pm-simple-price-grid, .pm-product-price-grid) {
                grid-template-columns: 1fr;
                gap: 0;
            }
        }

        @media (max-width: 340px) {
            body:is(.theme-negro, .theme-matrix) #product-modal .pm-kind-grid {
                grid-template-columns: 1fr;
            }
        }
        


/*
 * Tema Negro
 *
 * Mantiene la estructura del diseño actual y reemplaza únicamente su lenguaje
 * visual. Los controles privados del propietario que viven fuera del catálogo
 * conservan el diseño administrativo claro.
 */

body.theme-negro {
    background: #08090c !important;
    color: #f8fafc;
    color-scheme: dark;
}

body.theme-negro .catalog-container,
body.theme-negro .bottom-menu,
body.theme-negro .bottom-sheet,
body.theme-negro .order-modal,
body.theme-negro .ver-todo-modal-overlay,
body.theme-negro .share-modal,
body.theme-negro #confirm-clear-modal,
body.theme-negro #email-capture-modal {
    --color-text-primary: #f8fafc;
    --color-text-strong: #ffffff;
    --color-text-secondary: #d1d5db;
    --color-text-muted: #aeb7c4;
    --color-text-subtle: #a1a9b5;
    --color-text-slate: #c3cad4;
    --color-surface-base: #15171b;
    --color-surface-muted: #111318;
    --color-surface-soft: #202329;
    --color-surface-soft-2: #292d34;
    --color-surface-slate: #0d0f13;
    --color-surface-slate-2: #171a1f;
    --color-border-soft: #252930;
    --color-border-muted: #343941;
    --color-border-subtle: #454b55;
    --color-border-alt: #3d434c;
    --color-danger: #ff6b75;
    --color-danger-strong: #ff8790;
    --color-danger-soft: #35181c;
    --color-warning: #fbbf24;
    --color-success: #34d399;
    --color-success-strong: #2dd4a0;
    --color-success-apple: #42d67a;
    --color-success-soft: #123326;
    --color-info: #60a5fa;
    --color-info-strong: #7cb7ff;
    --color-info-strong-hover: #9ac8ff;
    --background: #08090c;
    --surface: #17191e;
    --text-primary: #f8fafc;
    --text-secondary: #b5becb;
    --primary-color: var(--accent-color);
    --primary-light: #272b32;
    --primary-dark: #050609;
    --shadow: 0 12px 30px rgba(0, 0, 0, 0.42);
}

body.theme-negro .catalog-container {
    background: #08090c !important;
    color: var(--color-text-primary) !important;
}

body.theme-negro .header-wrapper {
    background: rgba(10, 11, 15, 0.97) !important;
    border-bottom-color: #292d34 !important;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.2) !important;
}

body.theme-negro .catalog-header,
body.theme-negro .business-name {
    color: var(--color-text-primary) !important;
}

body.theme-negro .search-input {
    background: #15171c !important;
    border-color: #343941 !important;
    color: #f8fafc !important;
    caret-color: var(--accent-color) !important;
}

body.theme-negro .search-input::placeholder {
    color: #9ca3af !important;
    opacity: 1;
}

body.theme-negro .search-input:focus {
    border-color: var(--accent-color) !important;
    box-shadow: 0 0 0 3px rgba(248, 250, 252, 0.08) !important;
}

body.theme-negro .search-clear-btn,
body.theme-negro .share-btn {
    color: #e5e7eb !important;
}

body.theme-negro .share-btn {
    border-color: #3a4049 !important;
    background: #15171c !important;
}

body.theme-negro .share-btn:hover,
body.theme-negro .search-clear-btn:hover {
    background: #252930 !important;
    border-color: #525965 !important;
    color: #ffffff !important;
}

body.theme-negro .search-loading-overlay {
    background: rgba(8, 9, 12, 0.82) !important;
}

body.theme-negro .navigation-wrapper {
    background: rgba(10, 11, 15, 0.96) !important;
    border-color: #292d34 !important;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.3) !important;
}

body.theme-negro .nav-btn,
body.theme-negro .category-nav-btn {
    background: #181b20 !important;
    border-color: #343941 !important;
    color: #d5dbe4 !important;
    box-shadow: none !important;
}

body.theme-negro .nav-btn:hover,
body.theme-negro .category-nav-btn:hover {
    background: #262a31 !important;
    color: #ffffff !important;
}

body.theme-negro .category-nav-btn.active,
body.theme-negro #menu-categories.categories-active,
body.theme-negro #menu-categories-client.categories-active {
    background: var(--accent-color) !important;
    color: var(--accent-contrast-color, #08090c) !important;
    border-color: var(--accent-color) !important;
}

body.theme-negro .grid-catalog-links-strip,
body.theme-negro .grid-add-category-strip,
body.theme-negro .grid-empty-banner,
body.theme-negro .grid-category-section {
    background: #101216 !important;
    border-color: #343941 !important;
}

body.theme-negro .catalog-links-config-bar__title,
body.theme-negro .category-config-bar__title,
body.theme-negro .grid-display-mode-label {
    color: #aeb7c4 !important;
}

body.theme-negro .category-order-open-btn,
body.theme-negro .category-order-modal__close,
body.theme-negro .category-order-item__move,
body.theme-negro .category-order-modal__button--secondary {
    background: #202329 !important;
    border-color: #454b55 !important;
    color: #d1d5db !important;
}

body.theme-negro .category-order-open-btn:hover,
body.theme-negro .category-order-item__move:hover:not(:disabled) {
    background: #292d34 !important;
    border-color: var(--accent-color) !important;
    color: #fff !important;
}

body.theme-negro .category-order-modal__panel,
body.theme-negro .category-order-modal__footer {
    background: #171a1f !important;
    border-color: #343941 !important;
    color: #eef2f7 !important;
}

body.theme-negro .category-order-modal__header {
    border-color: #343941 !important;
}

body.theme-negro .category-order-modal__title,
body.theme-negro .category-order-item__name {
    color: #f8fafc !important;
}

body.theme-negro .category-order-modal__eyebrow,
body.theme-negro .category-order-modal__help,
body.theme-negro .category-order-modal__status {
    color: #aeb7c4 !important;
}

body.theme-negro .category-order-item {
    background: #202329 !important;
    border-color: #3a4049 !important;
}

body.theme-negro .category-order-item:hover {
    background: #292d34 !important;
    border-color: #59616e !important;
}

body.theme-negro .category-order-item.is-selected {
    background: color-mix(in srgb, var(--accent-color) 12%, #202329) !important;
    border-color: var(--accent-color) !important;
    box-shadow: inset 3px 0 0 var(--accent-color) !important;
}

body.theme-negro .category-order-item__position {
    background: #30353d !important;
    color: #d1d5db !important;
}

body.theme-negro .catalog-links-segment,
body.theme-negro .grid-display-toggle {
    background: #202329 !important;
    border-color: #3a4049 !important;
}

body.theme-negro .catalog-links-segment__opt,
body.theme-negro .grid-display-pill {
    color: #b8c0cc !important;
}

body.theme-negro .catalog-links-segment__opt.is-active,
body.theme-negro .grid-display-pill.is-active {
    background: #333840 !important;
    color: #ffffff !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35) !important;
}

body.theme-negro .catalog-links-segment__opt:hover:not(:disabled),
body.theme-negro .grid-display-pill:hover:not(:disabled) {
    background: #292d34 !important;
    color: #ffffff !important;
}

body.theme-negro .grid-category-title,
body.theme-negro .grid-category-add-btn {
    background: var(--accent-color) !important;
    color: var(--accent-contrast-color, #08090c) !important;
}

body.theme-negro .grid-category-discount-btn {
    background: #15181d !important;
    border-color: color-mix(in srgb, var(--accent-color) 48%, #343941) !important;
    color: var(--accent-color) !important;
}

body.theme-negro .grid-category-discount-btn:is(:hover, :focus-visible, .has-discount) {
    background: color-mix(in srgb, var(--accent-color) 14%, #15181d) !important;
    border-color: var(--accent-color) !important;
    color: var(--accent-color) !important;
}

body.theme-negro .category-discount-scope,
body.theme-negro .category-discount-form .discount-range-form,
body.theme-negro .category-discount-checkbox {
    background: #15181d !important;
    border-color: #343941 !important;
    color: #c7ced8 !important;
}

body.theme-negro .grid-category-meta {
    background: #252930 !important;
    color: #d4dae3 !important;
}

/* La UI de propietario se concatena después del tema: conservar contraste. */
body.theme-negro.is-catalog-owner .grid-category-meta {
    background: #252930 !important;
    color: #d4dae3 !important;
}

body.theme-negro.is-catalog-owner .grid-category-order-btn {
    background: #202329 !important;
    border-color: #454b55 !important;
    color: #f8fafc !important;
}

body.theme-negro.is-catalog-owner .grid-category-order-btn:is(:hover, :focus-visible):not(:disabled) {
    background: #292d34 !important;
    border-color: #aeb7c4 !important;
}

body.theme-negro.is-catalog-owner .grid-category-order-btn:focus-visible {
    outline: 2px solid #aeb7c4;
    outline-offset: 2px;
}

body.theme-negro.is-catalog-owner .grid-category-order-btn:disabled {
    background: #171a1f !important;
    border-color: #343941 !important;
    color: #aeb7c4 !important;
    opacity: 1;
    cursor: not-allowed !important;
}

body.theme-negro .grid-category-empty {
    background: #171a1f !important;
    border-color: #454b55 !important;
    color: #b8c0cc !important;
}

body.theme-negro .empty-client-container {
    background: #08090c !important;
}

body.theme-negro .empty-client-text {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    color: #f8fafc !important;
    width: min(360px, calc(100% - 180px));
    line-height: 1.45;
    text-align: center;
    overflow-wrap: anywhere;
}

body.theme-negro .empty-client-followup {
    font-size: 0.95em;
}

body.theme-negro .empty-client-separator {
    display: none;
}

@media (max-width: 768px) {
    body.theme-negro .empty-client-text {
        width: min(320px, calc(100% - 48px));
    }
}

body.theme-negro .grid-image,
body.theme-negro .bs-carousel-slide img {
    background: #15171b !important;
}

body.theme-negro .grid-product-info-name {
    color: #eef2f7 !important;
}

body.theme-negro .grid-product-info-main {
    border-right-color: #343941 !important;
}

body.theme-negro .grid-product-option-label {
    background: #252930 !important;
    color: #d7dde6 !important;
}

body.theme-negro .grid-product-option-attributes,
body.theme-negro .grid-product-option-row {
    color: #919ba8 !important;
}

body.theme-negro .grid-product-option-name {
    color: #d7dde6 !important;
}

body.theme-negro .grid-product-options-toggle {
    color: var(--accent-color) !important;
}

body.theme-negro .grid-product-option-swatch {
    border-color: rgba(255, 255, 255, 0.3) !important;
    box-shadow: 0 0 0 1px rgba(16, 18, 22, 0.72) inset !important;
}

body.theme-negro .grid-product-info-price,
body.theme-negro .grid-product-info-price-current {
    color: #cbd5e1 !important;
}

body.theme-negro .grid-product-info-price-old {
    color: #94a3b8 !important;
}

body.theme-negro .grid-product-info-price-new {
    color: var(--accent-color) !important;
}

body.theme-negro .grid-item.selected {
    box-shadow: none !important;
}

body.theme-negro .grid-item.selected.has-grid-product-info > .grid-image-stage {
    box-shadow: none !important;
}

body.theme-negro .grid-item.selected.has-grid-product-info > .grid-product-info {
    box-shadow: none !important;
}

body.theme-negro .grid-item.selected:not(.has-grid-product-info) > .grid-image-stage {
    box-shadow: none !important;
}

body.theme-negro .grid-category-section.has-carousel-fade .grid-category-media::after {
    background: linear-gradient(90deg, rgba(16, 18, 22, 0), rgba(16, 18, 22, 0.98)) !important;
}

body.theme-negro .grid-carousel-arrow {
    background: rgba(25, 28, 34, 0.96) !important;
    border-color: #414751 !important;
    color: #f8fafc !important;
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.45) !important;
}

body.theme-negro .grid-carousel-arrow:hover {
    background: #2b3037 !important;
}

body.theme-negro .carousel-dot {
    background: #5d6673 !important;
}

body.theme-negro .carousel-dot:hover {
    background: #cbd5e1 !important;
}

body.theme-negro .carousel-dot.active {
    background: var(--accent-color) !important;
}

body.theme-negro .catalog-link-btn {
    background: #181b20 !important;
    border-color: #3a4049 !important;
    color: #eef2f7 !important;
}

body.theme-negro .catalog-link-btn:hover {
    background: #24282f !important;
    border-color: #59616e !important;
}

body.theme-negro .catalog-links-add-btn,
body.theme-negro .grid-empty-banner-action {
    background: #1b1e24 !important;
    border-color: #454b55 !important;
    color: #e5e7eb !important;
}

body.theme-negro .catalog-links-add-btn:hover,
body.theme-negro .grid-empty-banner-action:hover {
    background: #292d34 !important;
    border-color: #626a77 !important;
}

/* Modal de enlaces: selector e inventario de iconos con contraste oscuro. */
body.theme-negro .catalog-link-icon-trigger {
    background: #202329 !important;
    border-color: #454b55 !important;
    color: #d1d5db !important;
}

body.theme-negro .catalog-link-icon-trigger:hover {
    background: #292d34 !important;
    border-color: #626a77 !important;
}

body.theme-negro .catalog-link-icon-trigger:focus-visible {
    outline: 2px solid var(--accent-color) !important;
    outline-offset: 2px !important;
}

body.theme-negro .catalog-link-icon-trigger__preview {
    color: #f8fafc !important;
}

body.theme-negro .catalog-link-icon-trigger__hint {
    color: #d1d5db !important;
}

body.theme-negro .catalog-links-icon-option {
    background: #202329 !important;
    border-color: #454b55 !important;
    color: #f8fafc !important;
}

body.theme-negro .catalog-links-icon-option:hover {
    background: #292d34 !important;
    border-color: var(--accent-color) !important;
}

body.theme-negro .catalog-links-icon-option:active {
    background: #30353d !important;
}

body.theme-negro .catalog-links-icon-option:focus-visible {
    outline: 2px solid var(--accent-color) !important;
    outline-offset: 2px !important;
}

body.theme-negro .catalog-links-icon-option__text {
    color: #d1d5db !important;
}

body.theme-negro .micatalogo-footer {
    color: #94a3b8 !important;
}

body.theme-negro .micatalogo-footer a {
    color: #e5e7eb !important;
}

body.theme-negro .micatalogo-footer .ar {
    color: #25d366 !important;
}

body.theme-negro .add-product-btn {
    background: rgba(15, 17, 21, 0.94) !important;
    border-color: var(--accent-color) !important;
    color: var(--accent-color) !important;
    box-shadow: 0 5px 18px rgba(0, 0, 0, 0.42) !important;
}

body.theme-negro .product-list-container .product-item {
    background: #1b1e24 !important;
    border-color: #454b55 !important;
    color: #f8fafc !important;
}

body.theme-negro .product-list-container .product-item:hover {
    background: #202329 !important;
    border-color: #626a77 !important;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.28) !important;
}

body.theme-negro .empty-product-list {
    background: #15181d !important;
    border-color: #454b55 !important;
    color: #aeb6c2 !important;
}

body.theme-negro .empty-product-list-title {
    color: #f8fafc !important;
}

body.theme-negro .product-list-container .product-item-name {
    color: #f8fafc !important;
}

body.theme-negro .product-list-container .product-item-price {
    color: #34d399 !important;
}

body.theme-negro .product-list-container .product-item-actions button {
    background: #202329 !important;
    border-color: #454b55 !important;
    color: #b8c0cc !important;
}

body.theme-negro .product-list-container .product-item-actions button svg,
body.theme-negro .product-list-container .product-item-actions button svg * {
    fill: #b8c0cc !important;
    color: #b8c0cc !important;
}

body.theme-negro .product-list-container .product-item-actions button:hover {
    background: #2b3037 !important;
    border-color: #626a77 !important;
}

body.theme-negro .grid-product-info--empty {
    background: #171a1f !important;
    border-color: #454b55 !important;
}

body.theme-negro .grid-product-info-empty-text {
    color: #b8c0cc !important;
}

body.theme-negro .grid-product-info-empty-title {
    color: #eef2f7 !important;
}

body.theme-negro .product-list-container .product-item-actions button:hover svg,
body.theme-negro .product-list-container .product-item-actions button:hover svg * {
    fill: #ffffff !important;
    color: #ffffff !important;
}

body.theme-negro .product-text-info {
    background: rgba(15, 17, 21, 0.96) !important;
    border-color: #3a4049 !important;
    box-shadow: 0 7px 22px rgba(0, 0, 0, 0.42) !important;
}

body.theme-negro .product-zone--icon-only .product-text-info--icon-only {
    box-shadow: none !important;
}

body.theme-negro .product-zone--icon-only {
    --mc-marker-capsule-surface: rgba(15, 17, 21, 0.96);
}

body.theme-negro .product-zone--icon-only .product-marker-cta {
    color: #f8fafc !important;
}

body.theme-negro .product-name {
    color: #f8fafc !important;
}

body.theme-negro .product-attribute {
    color: #b8c0cc !important;
}

body.theme-negro .product-price {
    color: var(--accent-color) !important;
}

body.theme-negro .product-cart-icon,
body.theme-negro .product-badge,
body.theme-negro .cart-count,
body.theme-negro #client-category-name {
    background: var(--accent-color) !important;
    color: var(--accent-contrast-color, #08090c) !important;
}

body.theme-negro .product-cart-icon svg,
body.theme-negro .product-cart-icon svg * {
    fill: var(--accent-contrast-color, #08090c) !important;
    color: var(--accent-contrast-color, #08090c) !important;
}

body.theme-negro .delete-category-btn--grid,
body.theme-negro .grid-category-section > .delete-category-btn--grid {
    background: #24272d !important;
    color: #ff8790 !important;
    border-color: #4c3035 !important;
}

body.theme-negro .delete-category-btn--grid:hover,
body.theme-negro .grid-category-section > .delete-category-btn--grid:hover {
    background: #351b20 !important;
    color: #ffabb1 !important;
}

body.theme-negro .cart-container {
    background: #111318 !important;
    color: #f8fafc !important;
    border-top-color: #343941 !important;
    box-shadow: 0 -12px 34px rgba(0, 0, 0, 0.5) !important;
}

body.theme-negro .cart-header,
body.theme-negro .cart-item,
body.theme-negro .cart-total,
body.theme-negro .cart-footer {
    border-color: #30353d !important;
}

body.theme-negro .cart-title-section,
body.theme-negro .item-name,
body.theme-negro .cart-total,
body.theme-negro .total-amount {
    color: #f8fafc !important;
}

body.theme-negro .item-price {
    color: #c3cad4 !important;
}

body.theme-negro .welcome-message {
    color: #f8fafc !important;
}

body.theme-negro .welcome-instruction {
    color: #c3cad4 !important;
}

body.theme-negro .clear-cart-btn {
    color: #ff8790 !important;
}

body.theme-negro .cart-toggle,
body.theme-negro .quantity-btn,
body.theme-negro .quantity-display {
    background: #202329 !important;
    border-color: #3a4049 !important;
    color: #f8fafc !important;
}

body.theme-negro .quantity-btn:hover {
    background: #30353d !important;
}

body.theme-negro .whatsapp-btn {
    color: #07120b !important;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3) !important;
}

body.theme-negro .bottom-menu {
    background: rgba(12, 13, 17, 0.97) !important;
    border-top: 1px solid #2d3138 !important;
    box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.32) !important;
}

body.theme-negro .bottom-menu-item,
body.theme-negro .menu-icon {
    color: #d8dee7 !important;
}

body.theme-negro .bottom-menu-item:hover .menu-icon,
body.theme-negro .bottom-menu-item:focus-visible .menu-icon {
    color: #ffffff !important;
}

body.theme-negro .bottom-menu-item.active,
body.theme-negro .bottom-menu-item.is-active {
    color: var(--accent-color) !important;
}

body.theme-negro #menu-categories .menu-icon,
body.theme-negro #menu-categories-client .menu-icon,
body.theme-negro #menu-categories .menu-icon svg,
body.theme-negro #menu-categories-client .menu-icon svg,
body.theme-negro #menu-categories .menu-icon svg *,
body.theme-negro #menu-categories-client .menu-icon svg * {
    color: #08090c !important;
    fill: #08090c !important;
    stroke: #08090c !important;
}

body.theme-negro .bottom-sheet {
    background: #15171b !important;
    color: #f8fafc !important;
    border: 1px solid #343941 !important;
    box-shadow: 0 -18px 50px rgba(0, 0, 0, 0.55) !important;
}

body.theme-negro .bs-handle {
    background: #59616e !important;
}

body.theme-negro .bs-close-btn,
body.theme-negro .bs-quantity-selector,
body.theme-negro .bs-summary,
body.theme-negro .bs-variant-item,
body.theme-negro .bs-btn-secondary,
body.theme-negro .bs-image-carousel,
body.theme-negro .bs-gallery-add-btn {
    background: #202329 !important;
    color: #f8fafc !important;
    border-color: #3a4049 !important;
}

body.theme-negro .bs-input-field,
body.theme-negro .bs-variant-input,
body.theme-negro .bs-radio-option {
    background: #111318 !important;
    color: #f8fafc !important;
    border-color: #454b55 !important;
}

body.theme-negro .bs-input-field::placeholder,
body.theme-negro .bs-variant-input::placeholder {
    color: #9ca3af !important;
    opacity: 1;
}

body.theme-negro .bs-option-type-select {
    background: #111318 !important;
    color: #f8fafc !important;
    border-color: #454b55 !important;
    color-scheme: dark;
}

body.theme-negro .bs-option-type-select option {
    background: #111318;
    color: #f8fafc;
}

body.theme-negro .bs-option-pill {
    background: #111318 !important;
    color: #7dd3fc !important;
    border-color: #4f7f98 !important;
}

body.theme-negro .bs-option-pill:hover,
body.theme-negro .bs-option-pill.selected {
    background: #18302f !important;
    color: #5eead4 !important;
    border-color: #2dd4bf !important;
}

body.theme-negro .bs-option-tag {
    background: #24282f !important;
    color: #f8fafc !important;
    border-color: #454b55 !important;
}

body.theme-negro .bs-variant-option {
    background: #181b20 !important;
    border-color: #454b55 !important;
    color: #f8fafc !important;
}

body.theme-negro .bs-variant-option:hover,
body.theme-negro .bs-variant-option.selected,
body.theme-negro .bs-radio-option:hover,
body.theme-negro .bs-radio-option.active {
    background: #24282f !important;
    border-color: var(--accent-color) !important;
}

body.theme-negro .bs-section-title,
body.theme-negro .bs-helper-text {
    color: #b8c0cc !important;
}

body.theme-negro .bs-radio-label,
body.theme-negro .bs-radio-option.active .bs-radio-label {
    color: #f8fafc !important;
}

body.theme-negro .bs-radio-description {
    color: #aeb7c4 !important;
}

body.theme-negro .bs-btn-primary,
body.theme-negro .bs-qty-btn,
body.theme-negro .bs-card-qty-btn,
body.theme-negro .bs-add-variant-btn {
    background: var(--accent-color) !important;
    border-color: var(--accent-color) !important;
    color: var(--accent-contrast-color, #08090c) !important;
}

/* Incluir el control de variantes; el acento de Negro puede ser casi blanco. */
body.theme-negro :is(.bs-qty-btn, .bs-card-qty-btn, .bs-option-qty-btn) {
    background: var(--accent-color) !important;
    border-color: var(--accent-color) !important;
    color: var(--accent-contrast-color, #08090c) !important;
}

body.theme-negro :is(.bs-qty-btn, .bs-card-qty-btn, .bs-option-qty-btn):focus-visible {
    outline: 2px solid #aeb7c4;
    outline-offset: 2px;
}

body.theme-negro :is(.bs-qty-btn, .bs-card-qty-btn, .bs-option-qty-btn):disabled {
    background: #292d34 !important;
    border-color: #454b55 !important;
    color: #aeb7c4 !important;
    opacity: 1;
}

body.theme-negro .bs-price,
body.theme-negro .bs-summary-total {
    color: #60a5fa !important;
}

body.theme-negro .live-client-modal {
    background: #17191e !important;
    border: 1px solid #343941 !important;
    color: #f8fafc !important;
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.58) !important;
}

body.theme-negro .live-client-title {
    color: #f8fafc !important;
}

body.theme-negro .live-client-text,
body.theme-negro .live-client-close {
    color: #b8c0cc !important;
}

body.theme-negro .live-client-close:hover {
    color: #ffffff !important;
}

body.theme-negro .live-client-btn {
    background: #c91424 !important;
    color: #ffffff !important;
}

body.theme-negro .live-client-btn:hover {
    background: #a90f1d !important;
}

body.theme-negro .order-modal-content,
body.theme-negro .order-confirmation-content,
body.theme-negro .ver-todo-modal-content,
body.theme-negro .share-content,
body.theme-negro #confirm-clear-modal .confirm-content,
body.theme-negro #email-capture-modal .confirm-content,
body.theme-negro #confirm-clear-modal .modern-confirm-content,
body.theme-negro #email-capture-modal .modern-confirm-content {
    background: #17191e !important;
    border: 1px solid #343941 !important;
    color: #f8fafc !important;
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.58) !important;
}

body.theme-negro .share-header,
body.theme-negro .share-option,
body.theme-negro .share-url input {
    border-color: #343941 !important;
}

body.theme-negro .share-option,
body.theme-negro .share-url input,
body.theme-negro .order-modal input,
body.theme-negro .order-modal select,
body.theme-negro .order-modal textarea,
body.theme-negro #email-capture-modal input {
    background: #101216 !important;
    color: #f8fafc !important;
}

body.theme-negro .share-option:hover {
    background: #252930 !important;
}

body.theme-negro .share-header h4,
body.theme-negro .share-option span,
body.theme-negro .order-modal h2,
body.theme-negro .order-modal h3,
body.theme-negro #confirm-clear-modal h3,
body.theme-negro #email-capture-modal h3 {
    color: #f8fafc !important;
}

body.theme-negro .share-close,
body.theme-negro .order-modal-close {
    color: #b8c0cc !important;
}

/* Menús y formularios del propietario */
body.theme-negro .config-modal-content,
body.theme-negro .config-modal-tabs,
body.theme-negro .category-modal-content,
body.theme-negro .images-modal-content,
body.theme-negro .crop-modal-content,
body.theme-negro .upload-status-modal-content,
body.theme-negro .pickup-point-modal-content,
body.theme-negro .live-mode-panel {
    background: #17191e !important;
    border-color: #343941 !important;
    color: #f8fafc !important;
    color-scheme: dark;
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.58) !important;
}

/* Editor de recorte: mantiene el cuerpo y las acciones dentro del tema oscuro. */
body.theme-negro .crop-modal-content {
    --crop-frame-theme-background: #111318;
    background: #17191e !important;
    border: 1px solid #343941 !important;
}

body.theme-negro .crop-modal-content :is(.crop-title, .crop-category, .crop-progress-text, .crop-adjust-label, .crop-adjust-icon, .crop-image-hint) {
    color: #aeb6c2 !important;
}

body.theme-negro .crop-modal-content .crop-title {
    color: #f8fafc !important;
}

body.theme-negro .crop-modal-content .crop-close {
    color: #aeb6c2 !important;
}

body.theme-negro .crop-modal-content .crop-close:hover {
    background: #292d34 !important;
    color: #ffffff !important;
}

body.theme-negro .crop-modal-content .crop-slider {
    background: #454b55 !important;
}

body.theme-negro .crop-modal-content .crop-slider-track {
    background: var(--accent-color) !important;
}

body.theme-negro .crop-modal-content .crop-slider-thumb {
    background: #f8fafc !important;
    border-color: var(--accent-color) !important;
}

body.theme-negro .crop-modal-content .crop-actions {
    border-top: 1px solid #343941 !important;
    background: #17191e !important;
}

body.theme-negro .crop-modal-content .crop-btn-secondary {
    border: 1px solid #454b55 !important;
    background: #202329 !important;
    color: #f8fafc !important;
}

body.theme-negro .crop-modal-content .crop-btn-secondary:hover {
    border-color: #6b7280 !important;
    background: #292d34 !important;
    color: #ffffff !important;
}

body.theme-negro .crop-modal-content .crop-btn-primary {
    background: var(--accent-color) !important;
    color: #ffffff !important;
}

body.theme-negro .config-modal-content :is(h3, h4, h5, label, .label-text),
body.theme-negro .category-modal-content :is(h3, h4, label),
body.theme-negro .images-modal-content :is(h3, h4, label),
body.theme-negro .pickup-point-modal-content :is(h3, h4, label),
body.theme-negro .live-mode-panel :is(h3, h4, label) {
    color: #f8fafc !important;
}

body.theme-negro .config-modal-content :is(p, small, .section-subtitle, .pickup-point-address, .pickup-point-description, .pickup-limit-text),
body.theme-negro .category-modal-content small,
body.theme-negro .images-modal-content small,
body.theme-negro .pickup-point-modal-content small,
body.theme-negro .live-mode-panel small {
    color: #aeb7c4 !important;
}

body.theme-negro .config-tabs-header,
body.theme-negro .config-modal-content .form-buttons,
body.theme-negro .config-modal-content .config-group,
body.theme-negro .config-modal-content .stats-mini {
    border-color: #343941 !important;
}

body.theme-negro .config-tab {
    background: transparent !important;
    border-color: #343941 !important;
    color: #aeb7c4 !important;
}

body.theme-negro .config-tab:hover {
    background: #202329 !important;
    color: #f8fafc !important;
}

body.theme-negro .config-tab.active {
    background: #202329 !important;
    border-bottom-color: #60a5fa !important;
    color: #7cb7ff !important;
}

body.theme-negro #business-config-modal .business-status-strip {
    border-color: #343941 !important;
    background: #111318 !important;
}

/* Selector de presentación de productos dentro de Configuración > Diseño. */
body.theme-negro #business-config-modal #icon-style-selector {
    border-color: #343941 !important;
    background: #111318 !important;
}

body.theme-negro #business-config-modal #icon-style-selector .marker-style-help-trigger {
    border-color: #454b55 !important;
    background: transparent !important;
    color: #aeb7c4 !important;
}

body.theme-negro #business-config-modal #icon-style-selector .marker-style-help-trigger:hover,
body.theme-negro #business-config-modal #icon-style-selector .marker-style-help-trigger:focus-visible {
    border-color: var(--accent-color) !important;
    background: #202329 !important;
    color: #f8fafc !important;
}

body.theme-negro #business-config-modal .business-status-label,
body.theme-negro #business-config-modal .business-config-section-heading h4,
body.theme-negro #business-config-modal .business-config-field-label {
    color: #f8fafc !important;
}

body.theme-negro #business-config-modal .business-status-visits,
body.theme-negro #business-config-modal .business-config-section-heading p,
body.theme-negro #business-config-modal .business-config-field-help {
    color: #aeb7c4 !important;
}

body.theme-negro #business-config-modal :is(
    .business-config-section-heading,
    .business-config-subsection
) {
    border-color: #343941 !important;
}

body.theme-negro #business-config-modal .business-account-card {
    border-color: #343941 !important;
    background: #101216 !important;
}

body.theme-negro #business-config-modal .business-support-card {
    border-color: #343941 !important;
    background: #101216 !important;
}

body.theme-negro #business-config-modal :is(.business-account-copy, .business-support-copy) strong {
    color: #f8fafc !important;
}

body.theme-negro #business-config-modal :is(
    .business-account-copy span,
    .business-support-copy span,
    .business-account-note
) {
    color: #aeb7c4 !important;
}

body.theme-negro #business-config-modal .business-support-icon {
    background: #10351b !important;
    color: #65e58c !important;
}

body.theme-negro #business-config-modal .business-support-button {
    border-color: #25d366 !important;
    background: #25d366 !important;
    color: #0f1a12 !important;
}

body.theme-negro #business-config-modal .business-support-button:hover {
    border-color: #20bd5a !important;
    background: #20bd5a !important;
    color: #0f1a12 !important;
}

body.theme-negro #business-config-modal .business-account-icon {
    background: #35181c !important;
    color: #ff8790 !important;
}

body.theme-negro #business-config-modal .business-logout-button {
    border-color: #ff6b75 !important;
    color: #ff8790 !important;
}

body.theme-negro #business-config-modal .business-logout-button:hover {
    background: #ff6b75 !important;
    color: #15171b !important;
}

body.theme-negro #business-config-modal :is(.business-subscription-card, .business-account-actions) {
    border-color: #343941 !important;
    background: #101216 !important;
}

body.theme-negro #business-config-modal :is(
    .business-subscription-copy strong,
    .business-subscription-total
) {
    color: #f8fafc !important;
}

body.theme-negro #business-config-modal :is(
    .business-subscription-label,
    .business-subscription-help
) {
    color: #aeb7c4 !important;
}

body.theme-negro #business-config-modal .business-subscription-renewal,
body.theme-negro #business-config-modal .business-account-action + .business-account-action {
    border-color: #343941 !important;
}

body.theme-negro #business-config-modal .business-subscription-months {
    color: #aeb7c4 !important;
}

body.theme-negro #business-config-modal .business-subscription-months select {
    border-color: #454b55 !important;
    background: #15171b !important;
    color: #f8fafc !important;
}

body.theme-negro #business-config-modal .business-subscription-badge {
    background: #10351b !important;
    color: #65e58c !important;
}

body.theme-negro #business-config-modal .business-subscription-card:is(.is-expiring, .is-expired) .business-subscription-badge {
    background: #3b2410 !important;
    color: #fdba74 !important;
}

body.theme-negro #business-config-modal .business-subscription-card.is-premium {
    border-color: #51406f !important;
    background: #121016 !important;
}

body.theme-negro #business-config-modal .business-subscription-card.is-premium .business-subscription-badge {
    background: #2d2142 !important;
    color: #c4b5fd !important;
}

body.theme-negro #business-config-modal .business-subscription-diamond {
    color: #a78bfa !important;
}

body.theme-negro #business-config-modal .business-subscription-pay {
    color: #15171b !important;
}

body.theme-negro #business-config-modal .business-account-action:hover {
    background: #1a1d22 !important;
}

body.theme-negro #business-config-modal .business-account-action.is-support {
    color: #65e58c !important;
}

body.theme-negro #business-config-modal .business-account-action.is-logout {
    color: #ff8790 !important;
}

body.theme-negro #business-config-modal .achievement-strip,
body.theme-negro #business-config-modal .achievement-card,
body.theme-negro #business-config-modal .achievement-detail-dialog,
body.theme-negro #business-config-modal .achievement-task,
body.theme-negro #business-config-modal :is(.achievement-detail-hint, .achievement-detail-success) {
    border-color: #343941 !important;
    background: #101216 !important;
}

body.theme-negro #business-config-modal .achievement-card {
    background: #15171b !important;
}

body.theme-negro #business-config-modal :is(
    .achievement-strip-heading > span,
    .achievement-card-title,
    .achievement-detail-header h4,
    .achievement-progress-copy strong
) {
    color: #f8fafc !important;
}

body.theme-negro #business-config-modal :is(
    .achievement-strip-heading small,
    .achievement-card-meta,
    .achievement-detail-kicker,
    .achievement-progress-copy,
    .achievement-task.is-done span:last-child
) {
    color: #aeb7c4 !important;
}

body.theme-negro #business-config-modal :is(
    .achievement-detail-description,
    .achievement-task,
    .achievement-detail-hint
) {
    color: #d7dce3 !important;
}

body.theme-negro #business-config-modal :is(.achievement-medal, .achievement-detail-icon, .achievement-detail-close) {
    border-color: #454b55 !important;
    background: #202329 !important;
}

body.theme-negro #business-config-modal .achievement-progress-track {
    background: #292d34 !important;
}

body.theme-negro #business-config-modal .achievement-medal-check {
    border-color: #15171b !important;
}

body.theme-negro #business-config-modal .business-status-strip.is-public .business-status-dot {
    background: #34d399 !important;
    box-shadow: 0 0 0 3px rgba(52, 211, 153, 0.16) !important;
}

body.theme-negro #business-config-modal .business-status-strip.is-private .business-status-dot {
    background: #fbbf24 !important;
    box-shadow: 0 0 0 3px rgba(251, 191, 36, 0.16) !important;
}

body.theme-negro .config-modal-content :is(input, textarea, select),
body.theme-negro .category-modal-content :is(input, textarea, select),
body.theme-negro .images-modal-content :is(input, textarea, select),
body.theme-negro .pickup-point-modal-content :is(input, textarea, select),
body.theme-negro .live-mode-panel :is(input, textarea, select) {
    background: #101216 !important;
    border-color: #454b55 !important;
    color: #f8fafc !important;
}

body.theme-negro .config-modal-content :is(input, textarea)::placeholder,
body.theme-negro .category-modal-content :is(input, textarea)::placeholder,
body.theme-negro .images-modal-content :is(input, textarea)::placeholder,
body.theme-negro .pickup-point-modal-content :is(input, textarea)::placeholder,
body.theme-negro .live-mode-panel :is(input, textarea)::placeholder {
    color: #9ca3af !important;
    opacity: 1;
}

body.theme-negro .config-modal-content :is(input, textarea, select):focus,
body.theme-negro .category-modal-content :is(input, textarea, select):focus,
body.theme-negro .images-modal-content :is(input, textarea, select):focus,
body.theme-negro .pickup-point-modal-content :is(input, textarea, select):focus,
body.theme-negro .live-mode-panel :is(input, textarea, select):focus {
    border-color: #60a5fa !important;
    box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.16) !important;
}

body.theme-negro .config-modal-content label {
    background-color: transparent !important;
}

body.theme-negro .config-modal-content .order-mode-settings {
    border-color: #343941 !important;
}

body.theme-negro .config-modal-content .order-mode-card {
    background: #111318 !important;
    border-color: #454b55 !important;
}

body.theme-negro .config-modal-content .order-mode-card.is-selected {
    background: #14231a !important;
    border-color: #22c55e !important;
}

body.theme-negro .config-modal-content .order-mode-card.is-disabled {
    opacity: 0.68 !important;
}

body.theme-negro .config-modal-content .order-mode-title {
    color: #f1f5f9 !important;
}

body.theme-negro .config-modal-content .order-mode-description {
    color: #b8c0cc !important;
}

body.theme-negro .config-modal-content .order-mode-badge {
    background: #343941 !important;
    color: #d8dee7 !important;
}

body.theme-negro #whatsapp-config-modal #contact-mode-fields {
    background: #101216 !important;
    border-color: #343941 !important;
    color: #f8fafc !important;
    box-shadow: inset 0 0 18px rgba(255, 255, 255, 0.018);
}

body.theme-negro #whatsapp-config-modal #contact-mode-fields .config-group > label,
body.theme-negro #whatsapp-config-modal #contact-mode-fields .contact-transfer-heading,
body.theme-negro #whatsapp-config-modal #contact-mode-fields .order-push-settings-copy strong {
    color: #f8fafc !important;
}

body.theme-negro #whatsapp-config-modal #contact-mode-fields :is(
    .config-group > small,
    .contact-transfer-help,
    .order-push-settings-copy span,
    .order-push-privacy,
    .order-push-status
) {
    color: #aeb7c4 !important;
}

body.theme-negro #whatsapp-config-modal #contact-mode-fields .contact-transfer-settings {
    border-color: #343941 !important;
}

body.theme-negro #whatsapp-config-modal #contact-mode-fields :is(input, textarea, select) {
    background: #17191e !important;
    border-color: #454b55 !important;
    color: #f8fafc !important;
}

body.theme-negro #whatsapp-config-modal #contact-mode-fields :is(input, textarea, select):focus {
    border-color: #60a5fa !important;
    box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.16) !important;
}

body.theme-negro #whatsapp-config-modal #contact-mode-fields .order-push-settings {
    background: #17191e !important;
    border-color: #343941 !important;
}

body.theme-negro #whatsapp-config-modal #contact-mode-fields .order-push-ios-help {
    background: rgba(245, 166, 35, 0.1) !important;
    color: #f3c978 !important;
}

body.theme-negro #whatsapp-config-modal #contact-mode-fields .order-push-toggle.is-active {
    background: transparent !important;
    border-color: #454b55 !important;
    color: #f8fafc !important;
}

body.theme-negro .config-modal-content .checkmark {
    background: #101216 !important;
    border-color: #59616e !important;
}

body.theme-negro .config-modal-content input:checked ~ .checkmark {
    background: #34d399 !important;
    border-color: #34d399 !important;
}

body.theme-negro .config-modal-content .checkmark::after {
    border-color: #08090c !important;
}

body.theme-negro .config-modal-content :is(
    .shipping-zones-config,
    .pickup-point-item,
    .discount-range-form,
    .type-option,
    .mode-option,
    .order-mode-option,
    .icon-style-btn,
    .catalog-theme-btn
) {
    background: #111318 !important;
    border-color: #3a4049 !important;
    color: #f8fafc !important;
}

body.theme-negro .config-modal-content :is(
    .type-option,
    .mode-option,
    .order-mode-option,
    .icon-style-btn,
    .catalog-theme-btn
):hover {
    background: #202329 !important;
    border-color: #59616e !important;
}

body.theme-negro .config-modal-content :is(
    .type-option.selected,
    .mode-option.selected,
    .order-mode-option.selected,
    .icon-style-btn.selected,
    .catalog-theme-btn.selected
) {
    background: #24282f !important;
    border-color: var(--accent-color) !important;
}

/* Asistente de productos con opciones: contraste y color coherentes. */
body.theme-negro #product-modal .type-option-radio {
    background: transparent !important;
    border-color: #59616e !important;
}

body.theme-negro #product-modal :is(
    .pm-simple-photo-mode-card,
    .pm-simple-photo-options,
    .pm-simple-photo-choice-thumb
) {
    background: #15171b !important;
    border-color: #3a4049 !important;
    color: #f8fafc !important;
}

body.theme-negro #product-modal .pm-simple-photo-mode-card.selected {
    background: #24282f !important;
    border-color: var(--accent-color) !important;
    box-shadow: 0 0 0 1px var(--accent-color) !important;
}

body.theme-negro #product-modal :is(
    .pm-simple-photo-mode-card span,
    .pm-simple-photo-options-heading p,
    .pm-simple-photo-options-empty
) {
    color: #aeb7c4 !important;
}

body.theme-negro #product-modal :is(
    .pm-simple-photo-options-heading strong,
    .pm-simple-photo-choice-name > span,
    .pm-simple-photo-choice-color > span
) {
    color: #f8fafc !important;
}

body.theme-negro #product-modal .pm-simple-photo-choice-row {
    border-top-color: #343941 !important;
}

body.theme-negro #product-modal .type-option.selected .type-option-radio {
    background: var(--accent-color) !important;
    border-color: var(--accent-color) !important;
}

body.theme-negro #product-modal .type-option.selected .type-option-radio::after {
    background: var(--accent-contrast-color, #08090c) !important;
}

body.theme-negro #product-modal .type-config {
    border-top-color: #454b55 !important;
}

body.theme-negro #product-modal .option-intro {
    background: #202329 !important;
    border-color: var(--accent-color) !important;
    color: #d8dee7 !important;
}

body.theme-negro #product-modal .option-intro em {
    color: #f8fafc !important;
}

body.theme-negro #product-modal .pm-option-manual-hint {
    background: transparent !important;
    border: 0 !important;
    color: #b8c0cc !important;
}

body.theme-negro #product-modal .variant-tags {
    background: #111318 !important;
    border: 1px dashed #454b55 !important;
    color: #f8fafc !important;
}

body.theme-negro #product-modal .variant-tags.empty::before {
    color: #aeb7c4 !important;
}

body.theme-negro #product-modal .variant-tag {
    background: #202329 !important;
    border-color: #454b55 !important;
    color: #f8fafc !important;
}

body.theme-negro #product-modal .option-pill {
    background: #202329 !important;
    border-color: #454b55 !important;
    color: #d8dee7 !important;
}

body.theme-negro #product-modal .option-pill:hover {
    background: #292d34 !important;
    border-color: var(--accent-color) !important;
    color: #ffffff !important;
}

body.theme-negro #product-modal .option-pill.added {
    background: #24282f !important;
    border-color: var(--accent-color) !important;
    color: #f8fafc !important;
}

body.theme-negro #product-modal .option-empty-warning {
    background: #2b2415 !important;
    border-color: #8a6b25 !important;
}

body.theme-negro #product-modal .option-empty-warning p {
    color: #fde68a !important;
}

body.theme-negro #product-modal .btn-skip-options {
    background: #202329 !important;
    border-color: #454b55 !important;
    color: #d8dee7 !important;
}

body.theme-negro #product-modal .btn-skip-options:hover {
    background: #292d34 !important;
    color: #ffffff !important;
}

body.theme-negro #product-modal .availability-matrix-title {
    color: #f8fafc !important;
}

body.theme-negro #product-modal .availability-matrix-hint {
    color: #b8c0cc !important;
}

body.theme-negro #product-modal .availability-grid {
    background: #343941 !important;
}

body.theme-negro #product-modal :is(
    .availability-header-cell,
    .availability-row-label
) {
    background: #202329 !important;
    color: #d8dee7 !important;
}

body.theme-negro #product-modal .availability-cell {
    background: #111318 !important;
}

body.theme-negro #product-modal .availability-cell:hover {
    background: #292d34 !important;
}

body.theme-negro #product-modal .availability-cell.active {
    background: #123326 !important;
}

body.theme-negro #product-modal .availability-cell.inactive {
    background: #35181c !important;
}

body.theme-negro #product-modal .availability-cell.active .availability-check {
    background: #34d399 !important;
    color: #08090c !important;
}

body.theme-negro #product-modal .availability-cell.inactive .availability-check {
    background: #ff6b75 !important;
    color: #08090c !important;
}

body.theme-negro #product-modal .no-matrix-message {
    background: #202329 !important;
    border-color: #454b55 !important;
    color: #d8dee7 !important;
}

body.theme-negro #product-modal .curva-option {
    background: #202329 !important;
    border-color: #454b55 !important;
    color: #f8fafc !important;
}

body.theme-negro #product-modal .curva-checkbox input {
    accent-color: var(--accent-color) !important;
}

body.theme-negro #product-modal .curva-checkbox-text h5 {
    color: #f8fafc !important;
}

body.theme-negro #product-modal .curva-checkbox-text p,
body.theme-negro #product-modal .curva-config > p {
    color: #b8c0cc !important;
}

body.theme-negro #product-modal .curva-config {
    border-top-color: #59616e !important;
}

body.theme-negro #product-modal .curva-item,
body.theme-negro #product-modal .curva-table-wrapper,
body.theme-negro #product-modal .curva-table-cell {
    background: #111318 !important;
    border-color: #454b55 !important;
}

body.theme-negro #product-modal .curva-item label {
    color: #d8dee7 !important;
}

body.theme-negro #product-modal :is(
    .curva-table-corner,
    .curva-table-header,
    .curva-table-row-label
) {
    background: #202329 !important;
    border-color: #454b55 !important;
    color: #d8dee7 !important;
}

body.theme-negro #product-modal .curva-table-cell {
    border-color: #454b55 !important;
}

body.theme-negro #product-modal .curva-summary {
    color: var(--accent-color) !important;
}

body.theme-negro #product-modal .option-progress-dot.active {
    background: var(--accent-color) !important;
}

body.theme-negro #product-modal .step-footer {
    border-top-color: #454b55 !important;
}

body.theme-negro #product-modal :is(
    .modal-btn.secondary,
    .btn-back
) {
    background: #202329 !important;
    border: 1px solid #454b55 !important;
    color: #d8dee7 !important;
}

body.theme-negro #product-modal :is(
    .modal-btn.secondary,
    .btn-back
):hover {
    background: #292d34 !important;
    color: #ffffff !important;
}

body.theme-negro #product-modal :is(
    .btn-next,
    .btn-add-variant,
    .btn-add-options
) {
    background: var(--accent-color) !important;
    color: var(--accent-contrast-color, #08090c) !important;
}

body.theme-negro #product-modal :is(
    .btn-next,
    .btn-add-variant,
    .btn-add-options
):hover {
    background: var(--accent-color) !important;
    filter: brightness(1.08);
}

body.theme-negro #product-modal :is(
    input,
    textarea,
    select,
    button,
    .type-option,
    .option-pill
):focus-visible {
    outline: 2px solid var(--accent-color) !important;
    outline-offset: 2px !important;
    box-shadow: none !important;
}

body.theme-negro .config-modal-content .btn-cancel {
    background: #202329 !important;
    border-color: #3a4049 !important;
    color: #d8dee7 !important;
}

body.theme-negro .config-modal-content .btn-cancel:hover {
    background: #2b3037 !important;
    color: #ffffff !important;
}

body.theme-negro .config-modal-content :is(
    .btn-create,
    #download-subscribers-csv,
    .btn-add-pickup-point
) {
    background: #34d399 !important;
    border-color: #34d399 !important;
    color: #08090c !important;
}

body.theme-negro .config-modal-content .pickup-point-btn.edit {
    color: #08090c !important;
}

body.theme-negro .config-modal-content .pickup-point-btn.delete {
    color: #08090c !important;
}

/* Información pública del negocio */
body.theme-negro #business-info-modal {
    background: rgba(0, 0, 0, 0.72) !important;
}

body.theme-negro #business-info-modal .config-modal-content {
    background: #17191e !important;
    border: 1px solid #343941 !important;
    color: #f8fafc !important;
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.58) !important;
}

body.theme-negro #business-info-modal .business-info-header,
body.theme-negro #business-info-modal :is(
    .social-media-section,
    .how-to-buy-section,
    .modal-close-section
) {
    border-color: #454b55 !important;
}

body.theme-negro #business-info-modal .logo-image {
    border-color: #59616e !important;
    background: #ffffff !important;
}

body.theme-negro #business-info-modal .business-name-section h3,
body.theme-negro #business-info-modal :is(
    .social-media-section,
    .how-to-buy-section
) h4 {
    color: #f8fafc !important;
}

body.theme-negro #business-info-modal .business-description {
    color: #aeb7c4 !important;
}

body.theme-negro #business-info-modal .social-link {
    background: #202329 !important;
    border-color: #454b55 !important;
    color: #e5e7eb !important;
    box-shadow: none !important;
}

body.theme-negro #business-info-modal .social-link:hover {
    background: #292d34 !important;
    border-color: #626a77 !important;
    color: #ffffff !important;
}

body.theme-negro #business-info-modal .social-link.instagram:hover {
    border-color: #e1306c !important;
    color: #f472b6 !important;
}

body.theme-negro #business-info-modal .social-link.facebook:hover {
    border-color: #1877f2 !important;
    color: #60a5fa !important;
}

body.theme-negro #business-info-modal .how-to-buy-text {
    background: #202329 !important;
    color: #d6dde8 !important;
    border-left-color: #34d399 !important;
}

body.theme-negro #business-info-modal .modal-btn.secondary {
    background: #202329 !important;
    border: 1px solid #454b55 !important;
    color: #e5e7eb !important;
}

body.theme-negro #business-info-modal .modal-btn.secondary:hover {
    background: #2b3037 !important;
    border-color: #626a77 !important;
    color: #ffffff !important;
}

body.theme-negro :where(
    .category-nav-btn,
    .share-btn,
    .grid-display-pill,
    .grid-category-add-btn,
    .catalog-link-btn,
    .catalog-links-add-btn,
    .add-product-btn,
    .quantity-btn,
    .whatsapp-btn,
    .bottom-menu-item,
    .bs-btn,
    .bs-qty-btn,
    input,
    textarea,
    select
):focus-visible {
    outline: 2px solid #f8fafc !important;
    outline-offset: 2px !important;
}

@media (prefers-reduced-motion: reduce) {
    body.theme-negro *,
    body.theme-negro *::before,
    body.theme-negro *::after {
        scroll-behavior: auto !important;
    }
}

/* Editor de producto por secciones */
body.theme-negro .bs-owner-editor,
body.theme-negro .bs-owner-editor-header,
body.theme-negro .bs-owner-actions {
    background: #15171b !important;
    color: #f8fafc !important;
}

body.theme-negro .bs-owner-editor-header,
body.theme-negro .bs-owner-actions {
    border-color: #343941 !important;
}

body.theme-negro .bs-editor-section {
    border-color: #3a4049 !important;
    background: #1b1e23 !important;
    box-shadow: none;
}

body.theme-negro .bs-editor-section.is-open {
    border-color: #59616e !important;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.22);
}

body.theme-negro .bs-editor-section--photos {
    border-color: var(--accent-color) !important;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.035), #1b1e23 44%) !important;
}

body.theme-negro .bs-editor-section-toggle,
body.theme-negro .bs-editor-section-title,
body.theme-negro .bs-primary-photo-note strong,
body.theme-negro .bs-subsection-title,
body.theme-negro .bs-editor-header-subtitle {
    color: #f8fafc !important;
}

body.theme-negro .bs-editor-section-summary,
body.theme-negro .bs-editor-section-chevron,
body.theme-negro .bs-primary-photo-note span,
body.theme-negro .bs-editor-header-subtitle {
    color: #aeb7c4 !important;
}

body.theme-negro .bs-editor-section-body,
body.theme-negro .bs-subsection-title {
    border-color: #343941 !important;
}

body.theme-negro .bs-primary-photo-note {
    border-color: #454b55 !important;
    background: #111318 !important;
}

body.theme-negro .bs-primary-photo-icon {
    background: #24282f !important;
    color: #f8fafc !important;
}

/* Avisos y confirmaciones comunes: mismos flujos, lenguaje visual Negro. */
body.theme-negro .notification {
    border: 1px solid #3a4049;
    border-left-width: 4px;
    background: #17191e;
    box-shadow: 0 16px 42px rgba(0, 0, 0, 0.5);
}

body.theme-negro .notification-title {
    color: #ffffff;
}

body.theme-negro .notification-message,
body.theme-negro .notification-close {
    color: #b5becb;
}

body.theme-negro .notification-close:hover {
    background: #292d34;
    color: #ffffff;
}

body.theme-negro .modern-confirm-overlay {
    background: rgba(2, 3, 5, 0.78) !important;
    backdrop-filter: blur(6px) !important;
}

body.theme-negro .modern-confirm-modal {
    border: 1px solid #3a4049 !important;
    background: #17191e !important;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6) !important;
}

body.theme-negro .modern-confirm-title {
    border-bottom-color: #343941 !important;
    color: #ffffff !important;
}

body.theme-negro .modern-confirm-message {
    color: #b5becb !important;
}

body.theme-negro .modern-confirm-btn {
    border-color: #454b55 !important;
    background: #202329 !important;
    color: #e5e7eb !important;
}

body.theme-negro .modern-confirm-btn:hover {
    border-color: #626a77 !important;
    background: #2b3037 !important;
    color: #ffffff !important;
}

body.theme-negro .modern-confirm-btn.confirm {
    border-color: #f8fafc !important;
    background: #f8fafc !important;
    color: #111318 !important;
}

body.theme-negro .modern-confirm-modal--danger .modern-confirm-btn.confirm {
    border-color: #ff6b75 !important;
    background: #ff6b75 !important;
    color: #21060a !important;
}

body.theme-negro .bs-external-product-note {
    border-color: #454b55;
    background: #202329;
    color: #f8fafc;
}

body.theme-negro .bs-external-product-note span,
body.theme-negro .bs-external-reference-price {
    color: #c8cdd5;
}

body.theme-negro .product-zone.external-product .external-chevron-icon {
    color: var(--accent-contrast-color, #08090c) !important;
}

/* Formulario y panel del sistema de pedidos */
body.theme-negro .order-form,
body.theme-negro .pedidos-modal {
    background: #17191e !important;
    border: 1px solid #343941 !important;
    color: #f8fafc !important;
    color-scheme: dark;
}

body.theme-negro .pedido-notification-not-found {
    border-color: #343941 !important;
    border-left-color: #7f8997 !important;
    background: #202329 !important;
    color: #f8fafc !important;
}

body.theme-negro .pedido-notification-not-found span {
    color: #aeb7c4 !important;
}

body.theme-negro .order-form label,
body.theme-negro .order-form p,
body.theme-negro .order-form small,
body.theme-negro .detalle-mensaje-label,
body.theme-negro .detalle-incluir-pago {
    color: #b8c0cc !important;
}

body.theme-negro .detalle-aviso-sena {
    background: rgba(245, 166, 35, 0.09) !important;
    border-color: rgba(245, 166, 35, 0.34) !important;
    color: #f3c978 !important;
}

body.theme-negro .detalle-aviso-sena small {
    color: #d5ad65 !important;
}

body.theme-negro .detalle-dato-copiable :is(small, span),
body.theme-negro .detalle-direccion-provincia {
    color: #aeb7c4 !important;
}

body.theme-negro .detalle-copiar {
    background: #202329 !important;
    border-color: #454b55 !important;
    color: #d7dde6 !important;
}

body.theme-negro .detalle-copiar:hover {
    background: #292d34 !important;
    border-color: #5c6470 !important;
}

body.theme-negro .detalle-copiar.is-copied {
    background: rgba(34, 197, 94, 0.12) !important;
    border-color: rgba(74, 222, 128, 0.45) !important;
    color: #86efac !important;
}

body.theme-negro #order-modal .order-step-indicator {
    color: #8f98a5 !important;
}

body.theme-negro #order-modal .order-step-indicator.is-active,
body.theme-negro #order-modal .order-step-indicator.is-complete {
    color: #f8fafc !important;
}

body.theme-negro #order-modal .order-step-number {
    background: #202329 !important;
    border-color: #454b55 !important;
    color: #b8c0cc !important;
}

body.theme-negro #order-modal :is(.order-step-indicator.is-active, .order-step-indicator.is-complete) .order-step-number {
    background: var(--accent-color, #f5a623) !important;
    border-color: var(--accent-color, #f5a623) !important;
    color: var(--accent-contrast-color, #08090c) !important;
}

body.theme-negro #order-modal .order-step-divider {
    background: #343941 !important;
}

body.theme-negro #confirmation-order-number,
body.theme-negro #shipping-cost-display > div,
body.theme-negro .pedidos-header,
body.theme-negro .detalle-cliente,
body.theme-negro .detalle-totales,
body.theme-negro .detalle-entrega,
body.theme-negro .detalle-pago {
    background: #101216 !important;
    border-color: #343941 !important;
    color: #f8fafc !important;
}

body.theme-negro .pedidos-content,
body.theme-negro .detalle-acciones-fijas {
    background: #17191e !important;
    border-color: #343941 !important;
}

body.theme-negro .pedidos-toolbar {
    background: #17191e !important;
    border-color: #343941 !important;
}

body.theme-negro .pedidos-search {
    background: #101216 !important;
    border-color: #343941 !important;
    color: #8f98a5 !important;
}

body.theme-negro .pedidos-search:focus-within {
    border-color: var(--accent-color, #f5a623) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-color, #f5a623) 14%, transparent) !important;
}

body.theme-negro .pedidos-search input,
body.theme-negro .pedido-label-input {
    background: transparent !important;
    color: #f8fafc !important;
}

body.theme-negro .pedidos-search input::placeholder,
body.theme-negro .pedido-label-input::placeholder { color: #737d8a !important; }

body.theme-negro .pedidos-search-clear:hover,
body.theme-negro .pedido-tag-trigger:hover,
body.theme-negro .pedido-tag-trigger[aria-expanded="true"] {
    background: #292d34 !important;
    border-color: #454b55 !important;
    color: #e5e7eb !important;
}

body.theme-negro .pedido-tag-trigger {
    background: #202329 !important;
    border-color: #343941 !important;
    color: #8f98a5 !important;
}

body.theme-negro .pedido-row-rail {
    background: #202329 !important;
    border-color: #343941 !important;
}

body.theme-negro .pedido-delete-trigger { color: #8f98a5 !important; }

body.theme-negro .pedido-delete-trigger:hover {
    background: #382126 !important;
    color: #ff8791 !important;
}

body.theme-negro .pedido-tag-trigger.is-active {
    background: color-mix(in srgb, var(--accent-color, #f5a623) 12%, #17191e) !important;
    border-color: color-mix(in srgb, var(--accent-color, #f5a623) 38%, #343941) !important;
    color: var(--accent-color, #f5a623) !important;
}

body.theme-negro .pedido-etiqueta {
    background: #292d34 !important;
    color: #d7dde6 !important;
}

body.theme-negro .pedido-label-editor { border-color: #343941 !important; }

body.theme-negro .pedido-label-input,
body.theme-negro .pedido-label-remove,
body.theme-negro .pedido-label-cancel {
    border-color: #454b55 !important;
}

body.theme-negro .pedido-label-remove,
body.theme-negro .pedido-label-cancel {
    background: transparent !important;
    color: #aeb7c4 !important;
}

body.theme-negro .pedido-delete-confirm { background: rgba(0, 0, 0, 0.62) !important; }

body.theme-negro .pedido-delete-panel {
    background: #202329 !important;
    border-color: #3c424b !important;
}

body.theme-negro .pedido-delete-copy h3,
body.theme-negro .pedido-delete-copy strong { color: #f8fafc !important; }

body.theme-negro .pedido-delete-copy p { color: #aeb7c4 !important; }

body.theme-negro .pedido-delete-cancel {
    background: transparent !important;
    border-color: #454b55 !important;
    color: #d7dde6 !important;
}

body.theme-negro .pedidos-modal .pedido-cargando .micatalogo-css-loader__spinner {
    border-color: rgba(248, 250, 252, 0.18) !important;
    border-top-color: #f8fafc !important;
}

body.theme-negro .pedido-row-item {
    background: #202329 !important;
    color: #f8fafc !important;
    box-shadow: none !important;
}

body.theme-negro .pedido-row-item:hover,
body.theme-negro .btn-listo-detalle:hover {
    background: #2b3037 !important;
}

body.theme-negro :is(.pedidos-header h2, .pedido-nombre, .detalle-cliente-nombre, .detalle-producto-nombre, .detalle-producto-precio, .detalle-total-row.total) {
    color: #f8fafc !important;
}

body.theme-negro :is(.pedido-meta, .seccion-titulo, .detalle-cliente-tel, .detalle-cliente-email, .detalle-cliente-provincia, .detalle-cliente-estado, .detalle-producto-variante, .detalle-producto-codigo, .detalle-direccion, .detalle-total-row) {
    color: #aeb7c4 !important;
}

body.theme-negro .detalle-producto-codigo strong { color: #d7dde6 !important; }

body.theme-negro .detalle-producto,
body.theme-negro .detalle-total-row.total,
body.theme-negro .pedidos-header {
    border-color: #343941 !important;
}

body.theme-negro .detalle-mensaje-input,
body.theme-negro .detalle-envio-costo-control,
body.theme-negro .btn-listo-detalle {
    background: #101216 !important;
    border-color: #343941 !important;
    color: #f8fafc !important;
}

body.theme-negro .detalle-envio-costo-control input {
    color: #f8fafc !important;
}

body.theme-negro .detalle-total-row.descuento { color: #65e58c !important; }
body.theme-negro .detalle-total-row.cancelados { color: #ff7c86 !important; }

/* Alta condensada de productos con opciones. */
body.theme-negro :is(.pm-choice-builder, .pm-condensed-availability) {
    background: #202329 !important;
    border-color: #454b55 !important;
}

body.theme-negro .pm-second-choice-prompt {
    background: #17191e !important;
    border-color: #454b55 !important;
}

body.theme-negro :is(.pm-choice-builder-heading, .pm-second-choice-prompt) strong {
    color: #f8fafc !important;
}

body.theme-negro :is(.pm-choice-builder-heading, .pm-second-choice-prompt) span {
    color: #aeb7c4 !important;
}

body.theme-negro :is(.pm-choice-builder-heading, .pm-second-choice-prompt) button {
    background: #101216 !important;
    border-color: #454b55 !important;
    color: #f8fafc !important;
}

body.theme-negro .pm-single-availability button {
    background: #172b1f !important;
    border-color: #3f8a5b !important;
    color: #e8fff0 !important;
}

body.theme-negro .pm-single-availability button.is-unavailable {
    background: #101216 !important;
    border-color: #454b55 !important;
    color: #8f98a5 !important;
}

/* Flujos nuevos de producto: contrato visual completo del tema Negro. */
body.theme-negro #product-modal {
    --pm-bg: #17191e;
    --pm-surface: #202329;
    --pm-surface-strong: #101216;
    --pm-border: #454b55;
    --pm-text: #f8fafc;
    --pm-muted: #aeb7c4;
    color-scheme: dark;
}

body.theme-negro #product-modal :is(.pm-step-marker, .pm-choice-builder, .pm-condensed-availability) {
    border-color: var(--pm-border) !important;
    background: var(--pm-surface) !important;
    color: var(--pm-text) !important;
}

body.theme-negro #product-modal .pm-step-marker {
    border: 1px solid #59616e;
    color: #d8dee7 !important;
}

body.theme-negro #product-modal :is(.section-title, .pm-kind-intro, .pm-kind-intro strong) {
    color: var(--pm-text) !important;
}

body.theme-negro #product-modal :is(.section-subtitle, .field-hint, .optional-label, .pm-kind-intro span) {
    color: var(--pm-muted) !important;
}

body.theme-negro #product-modal :is(.config-group input, .config-group textarea, .config-group select, .add-variant-row input) {
    border-color: var(--pm-border) !important;
    background: var(--pm-surface-strong) !important;
    color: var(--pm-text) !important;
    caret-color: var(--accent-color) !important;
}

body.theme-negro #product-modal :is(.config-group input, .config-group textarea, .config-group select, .add-variant-row input)::placeholder {
    color: #7f8895 !important;
    opacity: 1;
}

body.theme-negro #product-modal :is(.config-group input, .config-group textarea, .config-group select, .add-variant-row input):focus,
body.theme-negro #product-modal :is(.config-group input, .config-group textarea, .config-group select, .add-variant-row input):focus-visible {
    border-color: var(--accent-color) !important;
    outline: none !important;
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent-color) 24%, transparent) !important;
}

body.theme-negro #product-modal :is(.pm-kind-card, .pm-variant-photo-mode-grid button) {
    border-color: var(--pm-border) !important;
    background: var(--pm-surface-strong) !important;
    color: var(--pm-text) !important;
    box-shadow: none !important;
}

body.theme-negro #product-modal :is(.pm-kind-card, .pm-variant-photo-mode-grid button) span {
    color: var(--pm-muted) !important;
}

body.theme-negro #product-modal :is(.pm-kind-card, .pm-variant-photo-mode-grid button):hover,
body.theme-negro #product-modal .pm-variant-photo-mode-grid button.selected {
    border-color: var(--accent-color) !important;
    background: #292d34 !important;
    box-shadow: 0 0 0 1px var(--accent-color) !important;
}

body.theme-negro #product-modal :is(.pm-choice-builder-heading, .pm-option-color-tools, .pm-single-option-ready, .pm-availability-row-card) {
    border-color: var(--pm-border) !important;
    background: var(--pm-surface-strong) !important;
    color: var(--pm-text) !important;
}

body.theme-negro #product-modal :is(.pm-choice-builder-heading strong, .pm-option-color-title strong, .pm-single-option-ready strong, .pm-availability-row-card > strong) {
    color: var(--pm-text) !important;
}

body.theme-negro #product-modal :is(.pm-choice-builder-heading span, .pm-option-color-title span, .pm-single-option-ready span, .pm-single-option-ready div) {
    color: var(--pm-muted) !important;
}

body.theme-negro #product-modal .pm-choice-heading-actions button {
    border: 1px solid var(--pm-border) !important;
    border-radius: 7px;
    background: var(--pm-surface) !important;
    color: #f8fafc !important;
}

body.theme-negro #product-modal :is(.pm-option-color-choice, .pm-availability-choice) {
    border-color: var(--pm-border) !important;
    background: var(--pm-surface) !important;
    color: var(--pm-text) !important;
}

body.theme-negro #product-modal .pm-option-color-choice.selected {
    border-color: var(--accent-color) !important;
    background: color-mix(in srgb, var(--accent-color) 12%, var(--pm-surface)) !important;
    box-shadow: inset 0 0 0 1px var(--accent-color);
}

body.theme-negro #product-modal .pm-option-custom-color {
    color: var(--pm-muted) !important;
}

body.theme-negro #product-modal .pm-option-custom-color strong {
    color: var(--pm-text) !important;
}

body.theme-negro #product-modal .pm-option-custom-color input[type="color"] {
    border-color: var(--pm-border) !important;
    background: var(--pm-surface) !important;
}

body.theme-negro #product-modal .pm-availability-summary {
    border: 1px solid #3f8a5b;
    background: #172b1f !important;
    color: #bff5d0 !important;
}

body.theme-negro #product-modal .pm-availability-choice {
    border-color: #3f8a5b !important;
    background: #172b1f !important;
}

body.theme-negro #product-modal .pm-availability-choice strong {
    color: #86efac !important;
}

body.theme-negro #product-modal .pm-availability-choice.is-unavailable {
    border-color: var(--pm-border) !important;
    background: var(--pm-surface-strong) !important;
    color: #8f98a5 !important;
}

body.theme-negro #product-modal .pm-availability-choice.is-unavailable strong {
    color: #8f98a5 !important;
}

body.theme-negro #product-modal .pm-advanced-line {
    border-color: var(--pm-border) !important;
    background: var(--pm-surface-strong) !important;
}

body.theme-negro #product-modal .pm-advanced-toggle {
    background: transparent !important;
    color: var(--pm-text) !important;
}

body.theme-negro #product-modal .pm-advanced-toggle small {
    color: var(--pm-muted) !important;
}

body.theme-negro #product-modal .pm-advanced-toggle [data-toggle-label] {
    color: var(--accent-color) !important;
}

body.theme-negro #product-modal .pm-advanced-content {
    border-top-color: var(--pm-border) !important;
    background: var(--pm-surface) !important;
}

/* Selector y cantidades que ve el cliente en Negro. */
body.theme-negro #bottomSheet.client-mode {
    --bs-client-dock-bg: #15171b;
    --bs-client-dock-shadow: 0 -10px 24px rgba(0, 0, 0, 0.28);
}

body.theme-negro #bottomSheet.client-mode > .bs-client-dock {
    border-top-color: #343941 !important;
}

body.theme-negro #bottomSheet :is(.bs-client-visual-heading, .bs-client-single-heading) {
    color: #d8dee7 !important;
}

body.theme-negro #bottomSheet :is(.bs-client-visual-value, .bs-client-single-value) {
    border-color: #454b55 !important;
    background: #202329 !important;
    color: #f8fafc !important;
}

body.theme-negro #bottomSheet :is(.bs-client-visual-value, .bs-client-single-value):hover {
    border-color: #6b7280 !important;
    background: #292d34 !important;
    color: #ffffff !important;
}

body.theme-negro #bottomSheet :is(.bs-client-visual-value, .bs-client-single-value).selected {
    position: relative;
    z-index: 3;
    border-color: var(--accent-color) !important;
    background: color-mix(in srgb, var(--accent-color) 10%, #202329) !important;
    box-shadow: inset 0 0 0 1px var(--accent-color) !important;
}

body.theme-negro #bottomSheet .bs-client-single-quantity {
    border-color: #454b55 !important;
    background: #202329 !important;
    color: #f8fafc !important;
}

body.theme-negro #bottomSheet .bs-client-single-quantity.has-quantity {
    border-color: var(--accent-color) !important;
    background: color-mix(in srgb, var(--accent-color) 8%, #202329) !important;
    box-shadow: inset 0 0 0 1px var(--accent-color) !important;
}

body.theme-negro #bottomSheet :is(.bs-variant-group, .bs-variant-card) {
    border-color: #3a4049 !important;
    background: #202329 !important;
    color: #f8fafc !important;
}

body.theme-negro #bottomSheet :is(.bs-variant-group-title, .bs-variant-card-name, .bs-option-label, .bs-card-qty-value, .bs-option-qty-value) {
    color: #f8fafc !important;
}

body.theme-negro #bottomSheet :is(.bs-variant-option, .bs-variant-card.has-quantity) {
    border-color: #454b55 !important;
    background: #111318 !important;
}

body.theme-negro #bottomSheet :is(.bs-variant-option.has-quantity, .bs-variant-card.has-quantity) {
    border-color: var(--accent-color) !important;
    background: color-mix(in srgb, var(--accent-color) 8%, #111318) !important;
}

body.theme-negro #bottomSheet .bs-cart-summary-compact {
    border: 1px solid #3a4049 !important;
    background: #202329 !important;
}

body.theme-negro #bottomSheet .bs-draft-selection-row {
    border-color: #3a4049 !important;
}

body.theme-negro #bottomSheet .bs-draft-selection-title {
    border-color: #3a4049 !important;
    color: #f8fafc !important;
}

body.theme-negro #bottomSheet :is(
    .bs-draft-selection-label,
    .bs-draft-selection-quantity,
    .bs-draft-selection-total strong
) {
    color: #f8fafc !important;
}

body.theme-negro #bottomSheet .bs-draft-selection-total {
    color: #aeb6c2 !important;
}

body.theme-negro #bottomSheet .bs-draft-selection-remove {
    color: #ff7b86 !important;
}

body.theme-negro #bottomSheet .bs-added-selection-summary {
    color: #aeb6c2 !important;
}

body.theme-negro #bottomSheet .bs-added-selection-summary strong {
    color: #f8fafc !important;
}

/* Etapa de fotos y asociación visual en Negro. */
body.theme-negro #product-modal :is(
    .pm-primary-photo-assignment,
    .pm-photo-map-row,
    .pm-general-photo-upload.is-mapping,
    .pm-simple-photo-choice-row,
    label.pm-simple-photo-color-toggle,
    .pm-simple-photo-color-panel,
    .pm-simple-photo-client-preview
) {
    border-color: var(--pm-border) !important;
    background: var(--pm-surface-strong) !important;
    color: var(--pm-text) !important;
    box-shadow: none !important;
}

body.theme-negro #product-modal :is(
    .pm-primary-photo-copy strong,
    .pm-primary-photo-assignment strong,
    .pm-photo-map-copy strong,
    .pm-general-photo-copy strong,
    .pm-simple-photo-choice-topline strong,
    .pm-simple-photo-color-toggle strong,
    .pm-simple-photo-client-preview > strong
) {
    color: var(--pm-text) !important;
}

body.theme-negro #product-modal :is(
    .pm-primary-photo-copy span,
    .pm-primary-photo-assignment label > span,
    .pm-photo-map-copy span,
    .pm-general-photo-copy span,
    .pm-simple-photo-choice-name > small,
    .pm-simple-photo-color-toggle small,
    .pm-simple-photo-client-preview small
) {
    color: var(--pm-muted) !important;
}

body.theme-negro #product-modal .pm-primary-photo-placeholder,
body.theme-negro #product-modal .pm-photo-map-thumb {
    background: var(--pm-surface) !important;
    color: var(--pm-muted) !important;
}

body.theme-negro #product-modal :is(.pm-primary-photo-assignment select, .pm-gallery-assignment select, .pm-simple-photo-choice-name input) {
    border-color: var(--pm-border) !important;
    background: var(--pm-surface) !important;
    color: var(--pm-text) !important;
}

body.theme-negro #product-modal .pm-simple-photo-choice-topline {
    border-bottom-color: var(--pm-border) !important;
}

body.theme-negro #product-modal .pm-simple-photo-choice-name > span small,
body.theme-negro #product-modal .pm-photo-map-badge {
    background: var(--pm-surface) !important;
    color: var(--pm-muted) !important;
}

body.theme-negro #product-modal :is(.pm-gallery-add-btn, .pm-photo-map-upload) {
    border-color: #59616e !important;
    background: var(--pm-surface) !important;
    color: #f8fafc !important;
}

body.theme-negro #product-modal :is(.pm-gallery-add-btn, .pm-photo-map-upload):hover {
    border-color: var(--accent-color) !important;
    background: #292d34 !important;
    color: #ffffff !important;
}

body.theme-negro #product-modal .pm-simple-photo-color-presets button,
body.theme-negro #product-modal .pm-simple-photo-client-preview span {
    border-color: var(--pm-border) !important;
    background: var(--pm-surface) !important;
    color: var(--pm-text) !important;
}

body.theme-negro #product-modal .pm-simple-photo-color-presets button.selected {
    border-color: var(--accent-color) !important;
    background: color-mix(in srgb, var(--accent-color) 10%, var(--pm-surface)) !important;
    box-shadow: inset 0 0 0 1px var(--accent-color) !important;
}

body.theme-negro #product-modal .pm-gallery-preview:empty::before {
    color: var(--pm-muted) !important;
}

/* Creador guiado: misma jerarquía del flujo Default, con lenguaje Negro. */
body.theme-negro #product-modal :is(
    .pm-guided-fork-recap,
    .pm-guided-fork-card,
    .pm-simple-photo-mode-card,
    .pm-gallery-item-shell
) {
    border-color: var(--pm-border) !important;
    background: var(--pm-surface-strong) !important;
    color: var(--pm-text) !important;
    box-shadow: none !important;
}

body.theme-negro #product-modal :is(
    .pm-guided-fork-recap small,
    .pm-guided-fork-card span,
    .pm-simple-photo-mode-card span
) {
    color: var(--pm-muted) !important;
}

body.theme-negro #product-modal :is(.pm-guided-fork-card, .pm-simple-photo-mode-card):hover,
body.theme-negro #product-modal .pm-simple-photo-mode-card.selected {
    border-color: var(--accent-color) !important;
    background: #292d34 !important;
    box-shadow: 0 0 0 1px var(--accent-color) !important;
}

body.theme-negro #product-modal .pm-choice-values:not([hidden]) {
    animation: pmNegroChoiceEnter .24s ease both;
}

@keyframes pmNegroChoiceEnter {
    from { opacity: 0; transform: translateY(5px); }
    to { opacity: 1; transform: translateY(0); }
}

body.theme-negro #product-modal .pm-color-selected-check {
    color: var(--accent-color) !important;
}

body.theme-negro #product-modal .pm-guided-fork-tags > span {
    border-color: var(--pm-border) !important;
    background: var(--pm-surface) !important;
    color: var(--pm-muted) !important;
    transition: border-color .18s ease, background .18s ease, color .18s ease, transform .18s ease;
}

body.theme-negro #product-modal .pm-guided-fork-tags > span.is-active {
    border-color: var(--accent-color) !important;
    background: color-mix(in srgb, var(--accent-color) 10%, var(--pm-surface)) !important;
    color: var(--pm-text) !important;
    transform: translateY(-1px);
}

body.theme-negro #product-modal .pm-guided-fork-quantity {
    border-color: var(--pm-border) !important;
    background: var(--pm-surface) !important;
}

body.theme-negro #product-modal .pm-guided-fork-quantity > :is(span, strong) {
    border-color: var(--pm-border) !important;
    background: transparent !important;
    color: var(--pm-text) !important;
}

body.theme-negro #product-modal .pm-guided-fork-quantity > span:last-child {
    color: var(--accent-color) !important;
}

body.theme-negro #product-modal :is(
    .pm-guided-simple #simple-gallery-upload .pm-gallery-drop-btn,
    .pm-general-photo-upload .pm-gallery-drop-btn
) {
    border-color: color-mix(in srgb, var(--accent-color) 62%, var(--pm-border)) !important;
    background: color-mix(in srgb, var(--accent-color) 4%, var(--pm-surface-strong)) !important;
    color: var(--pm-text) !important;
}

body.theme-negro #product-modal :is(
    .pm-guided-simple #simple-gallery-upload .pm-gallery-drop-icon,
    .pm-general-photo-upload .pm-gallery-drop-icon
) {
    color: var(--accent-color) !important;
}

body.theme-negro .modern-confirm-modal--warning .modern-confirm-btn.confirm {
    border-color: var(--accent-color, #f5a623) !important;
    background: var(--accent-color, #f5a623) !important;
    color: var(--accent-contrast-color, #08090c) !important;
}

@media (prefers-reduced-motion: reduce) {
    body.theme-negro #product-modal .pm-choice-values:not([hidden]) {
        animation: none;
    }
}

/*
 * Paridad estructural del editor Default.
 * El flujo, el orden y las medidas son comunes; Negro solo aporta su paleta.
 */
body.theme-negro .bottom-sheet.owner-mode .bs-editor-section-summary {
    display: -webkit-box;
    overflow: hidden;
    color: #aeb7c4 !important;
    text-overflow: clip;
    white-space: normal;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

body.theme-negro .bottom-sheet.editing-product .bs-sale-summary-card,
body.theme-negro .bs-product-availability-card {
    border-color: #3a4049 !important;
    background: #111318 !important;
    color: #f8fafc !important;
}

body.theme-negro .bottom-sheet.editing-product .bs-sale-summary-card {
    box-shadow: inset 3px 0 0 color-mix(in srgb, var(--accent-color) 72%, #5b6470);
}

body.theme-negro .bs-sale-summary-copy > :is(strong, small),
body.theme-negro .bs-product-availability-card strong,
body.theme-negro .bs-availability-manager-copy strong {
    color: #f8fafc !important;
}

body.theme-negro .bs-sale-summary-copy > span,
body.theme-negro .bs-sale-summary-help,
body.theme-negro .bs-product-availability-card :is(span, small),
body.theme-negro .bs-availability-manager-copy span {
    color: #aeb7c4 !important;
}

body.theme-negro .bs-sale-change-btn,
body.theme-negro .bs-save-availability-btn,
body.theme-negro .bs-product-availability-card > button {
    border-color: #59616e !important;
    background: #202329 !important;
    color: #f8fafc !important;
}

body.theme-negro .bs-sale-change-btn:hover,
body.theme-negro .bs-save-availability-btn:hover,
body.theme-negro .bs-product-availability-card > button:hover {
    border-color: var(--accent-color) !important;
    background: #292d34 !important;
}

body.theme-negro .bs-product-availability-card.is-available {
    border-color: color-mix(in srgb, var(--color-success) 58%, #3a4049) !important;
    background: color-mix(in srgb, var(--color-success) 7%, #111318) !important;
}

/* Editar producto: valores existentes y alta rápida de nuevas elecciones. */
body.theme-negro .bottom-sheet.editing-product .bs-availability-option-row {
    border-color: #3a4049 !important;
    background: #111318 !important;
}

body.theme-negro .bottom-sheet.editing-product .bs-availability-option-label span {
    color: #8f99a8 !important;
}

body.theme-negro .bottom-sheet.editing-product .bs-availability-option-label strong {
    color: #f8fafc !important;
}

body.theme-negro .bottom-sheet.editing-product :is(.bs-availability-option-chip, .bs-availability-option-add-trigger) {
    border-color: #4a515d !important;
    background: #202329 !important;
    color: #f8fafc !important;
}

body.theme-negro .bottom-sheet.editing-product .bs-availability-option-add-trigger {
    border-color: var(--accent-color) !important;
    background: transparent !important;
    color: var(--accent-color) !important;
}

body.theme-negro .bottom-sheet.editing-product :is(.bs-availability-option-chip, .bs-availability-option-add-trigger):hover {
    border-color: var(--accent-color) !important;
    background: #292d34 !important;
    color: #ffffff !important;
}

body.theme-negro .bottom-sheet.editing-product .bs-availability-option-adder input {
    border-color: #4a515d !important;
    background: #111318 !important;
    color: #f8fafc !important;
}

body.theme-negro .bottom-sheet.editing-product .bs-availability-option-adder input::placeholder {
    color: #8f99a8 !important;
}

body.theme-negro .bottom-sheet.editing-product .bs-availability-option-adder > button:not(.bs-availability-option-cancel) {
    border-color: var(--accent-color) !important;
    background: var(--accent-color) !important;
    color: #ffffff !important;
}

body.theme-negro .bottom-sheet.editing-product .bs-availability-option-cancel {
    border-color: #4a515d !important;
    background: #202329 !important;
    color: #d7dce4 !important;
}

body.theme-negro .bs-sale-config-overlay {
    background: rgba(2, 3, 5, 0.76) !important;
}

body.theme-negro .bs-sale-config-dialog,
body.theme-negro .bs-sale-config-header,
body.theme-negro .bs-sale-config-actions,
body.theme-negro .bs-sale-config-content {
    border-color: #343941 !important;
    background: #17191e !important;
    color: #f8fafc !important;
}

body.theme-negro .bs-sale-config-dialog {
    border-radius: 18px !important;
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.62) !important;
}

body.theme-negro .bs-sale-config-header :is(strong, span),
body.theme-negro .bs-sale-wizard-intro :is(strong, span, small),
body.theme-negro .bs-option-ready-note {
    color: inherit !important;
}

body.theme-negro .bs-sale-config-header span,
body.theme-negro .bs-sale-wizard-intro small,
body.theme-negro .bs-option-ready-note {
    color: #aeb7c4 !important;
}

body.theme-negro .bs-sale-config-header > button {
    border-color: #454b55 !important;
    background: #202329 !important;
    color: #f8fafc !important;
}

body.theme-negro .bs-sale-wizard-progress {
    background: #252930 !important;
}

body.theme-negro .bs-sale-wizard-progress > span {
    background: var(--accent-color) !important;
}

body.theme-negro .bs-variant-photo-mode-card,
body.theme-negro .bs-photo-map-row,
body.theme-negro .bs-general-photo-upload.is-mapping,
body.theme-negro .bs-primary-photo-note {
    border-color: #454b55 !important;
    background: #111318 !important;
}

body.theme-negro .bs-variant-photo-mode-card.selected {
    border-color: var(--accent-color) !important;
    background: #202329 !important;
}

body.theme-negro .bs-variant-photo-mode-card.selected::after {
    background: var(--accent-color) !important;
    color: var(--accent-contrast-color, #08090c) !important;
}

body.theme-negro .bs-photo-map-copy strong,
body.theme-negro .bs-general-photo-copy strong {
    color: #f8fafc !important;
}

body.theme-negro .bs-photo-map-copy span,
body.theme-negro .bs-general-photo-copy span {
    color: #aeb7c4 !important;
}

body.theme-negro .bs-photo-map-upload,
body.theme-negro .bs-photo-map-badge,
body.theme-negro .bs-gallery-add-btn {
    border-color: #59616e !important;
    background: #202329 !important;
    color: #f8fafc !important;
}

body.theme-negro .modern-confirm-modal {
    width: 90% !important;
    max-width: 400px !important;
    border-radius: 12px !important;
}

body.theme-negro .modern-confirm-btn-preview {
    border-top-color: #343941 !important;
}

body.theme-negro .modern-confirm-footer {
    border-top-color: #343941 !important;
}

/* Tarjeta exterior con una única acción interactiva. */
body.theme-negro .classic-product-list {
    border: 0;
    background: transparent;
}

body.theme-negro .classic-product-button {
    border-bottom-color: #343941;
    background: transparent;
    color: #f8fafc;
}

body.theme-negro .classic-product-button__option-row,
body.theme-negro .classic-product-button__price {
    color: #f8fafc;
}

body.theme-negro .classic-product-button__option-attributes {
    color: #9ca3af;
}

body.theme-negro .classic-product-button__option-swatch {
    box-shadow: 0 0 0 1.5px #181b20 inset;
}

body.theme-negro .classic-product-button__attribute,
body.theme-negro .classic-product-button__price-old {
    color: #9ca3af;
}

body.theme-negro .classic-product-button__kind-badge {
    border-color: color-mix(in srgb, var(--accent-color, #ec4899) 42%, #343941);
    background: color-mix(in srgb, var(--accent-color, #ec4899) 10%, #181b20);
    color: var(--accent-color, #ec4899);
}

body.theme-negro .classic-product-button.is-unavailable {
    border-color: #3f4652;
    background: #20242a;
    color: #8c95a3;
}

body.theme-negro .classic-product-admin-entry,
body.theme-negro .classic-product-client-entry {
    border: 0;
    background: #181b20;
    box-shadow: 0 3px 14px rgba(0, 0, 0, 0.24);
}

body.theme-negro .classic-product-admin-entry:focus-within,
body.theme-negro .classic-product-client-entry:focus-within {
    box-shadow:
        0 3px 14px rgba(0, 0, 0, 0.24),
        0 0 0 2px color-mix(in srgb, var(--accent-color, #ec4899) 34%, transparent);
}

body.theme-negro .classic-product-admin-entry__main,
body.theme-negro .classic-product-client-entry__main {
    background: #181b20;
}

body.theme-negro .classic-product-admin-entry .classic-product-button--admin:hover,
body.theme-negro .classic-product-admin-entry .classic-product-button--admin:focus-visible,
body.theme-negro .classic-product-admin-entry .classic-product-button--admin:active,
body.theme-negro .classic-product-client-entry .classic-product-button:hover,
body.theme-negro .classic-product-client-entry .classic-product-button:focus-visible,
body.theme-negro .classic-product-client-entry .classic-product-button:active {
    background: transparent;
}

body.theme-negro .classic-product-admin-entry__toolbar,
body.theme-negro .classic-product-client-entry__toolbar {
    border-top-color: #343941;
    background: #15181c;
}

body.theme-negro .classic-product-admin-entry__code {
    color: #9ca3af;
}

body.theme-negro .classic-product-admin-entry__code-value {
    color: #d7dce4;
}

body.theme-negro .classic-product-button__admin-action .classic-product-button__meta {
    border-color: color-mix(in srgb, var(--accent-color, #ec4899) 44%, #343941);
    background: transparent;
    color: var(--accent-color, #ec4899);
}

body.theme-negro .classic-product-button__delete {
    border-color: rgba(244, 63, 94, 0.34);
    background: transparent;
    color: #fda4af;
}

body.theme-negro .classic-product-button__delete:hover,
body.theme-negro .classic-product-button__delete:focus-visible {
    background: rgba(244, 63, 94, 0.12);
    color: #fda4af;
}

/* ===== FLUJOS ADMINISTRATIVOS: CATEGORÍAS E IMÁGENES ===== */

/* El modal se genera con estilos inline; estas reglas preservan la identidad de Negro. */
body.theme-negro .category-manage-modal {
    padding: 16px !important;
    background: rgba(4, 5, 8, 0.78) !important;
    backdrop-filter: blur(5px);
}

body.theme-negro .category-manage-modal-content {
    width: min(100%, 390px) !important;
    margin: 0 !important;
    padding: 24px !important;
    border: 1px solid #3b414b !important;
    border-radius: 16px !important;
    background: #17191e !important;
    color: #f8fafc !important;
    box-shadow: 0 28px 76px rgba(0, 0, 0, 0.58) !important;
}

body.theme-negro .category-manage-modal-content h3 {
    margin: 0 0 20px !important;
    color: #f8fafc !important;
    font-size: 1.08rem !important;
    font-weight: 700 !important;
    text-align: left !important;
}

body.theme-negro .category-manage-modal-content .category-rename-section {
    margin-bottom: 18px !important;
    padding-bottom: 18px !important;
    border-bottom-color: #343941 !important;
}

body.theme-negro .category-manage-modal-content .category-rename-section label {
    color: #d7dce4 !important;
    font-size: 0.8rem !important;
}

body.theme-negro .category-manage-modal-content .category-name-input {
    border: 1px solid #4a515d !important;
    border-radius: 9px !important;
    background: #101216 !important;
    color: #f8fafc !important;
    caret-color: var(--accent-color) !important;
}

body.theme-negro .category-manage-modal-content .category-name-input:focus {
    outline: none !important;
    border-color: var(--accent-color) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-color) 18%, transparent) !important;
}

body.theme-negro .category-manage-modal-content button {
    min-height: 42px;
    border-radius: 9px !important;
    font-family: inherit !important;
    font-size: 0.82rem !important;
    font-weight: 650 !important;
}

body.theme-negro .category-manage-modal-content .save-category-name {
    border: 1px solid var(--accent-color) !important;
    background: var(--accent-color) !important;
    color: #ffffff !important;
}

body.theme-negro .category-manage-modal-content .save-category-name:disabled {
    border-color: #3f4652 !important;
    background: #292d34 !important;
    color: #858f9d !important;
    opacity: 1 !important;
}

body.theme-negro .category-manage-modal-content :is(.delete-category-trigger, .confirm-delete) {
    border: 1px solid rgba(248, 113, 113, 0.56) !important;
    background: rgba(127, 29, 29, 0.18) !important;
    color: #fca5a5 !important;
}

body.theme-negro .category-manage-modal-content :is(.delete-category-trigger, .confirm-delete):hover {
    border-color: #f87171 !important;
    background: rgba(127, 29, 29, 0.3) !important;
    color: #fecaca !important;
}

body.theme-negro .category-manage-modal-content .delete-confirm-container p {
    color: #fca5a5 !important;
    line-height: 1.45;
}

body.theme-negro .category-manage-modal-content :is(.cancel-delete, .close-category-modal) {
    border: 1px solid #4a515d !important;
    background: #202329 !important;
    color: #d7dce4 !important;
}

body.theme-negro .category-manage-modal-content :is(.cancel-delete, .close-category-modal):hover {
    border-color: #6b7280 !important;
    background: #292d34 !important;
    color: #ffffff !important;
}

/* Selección inicial de imágenes. La geometría es compartida con Default. */
body.theme-negro .images-modal {
    background: rgba(4, 5, 8, 0.78) !important;
    backdrop-filter: blur(5px);
}

body.theme-negro .images-modal-content {
    border: 1px solid #3b414b !important;
    background: #17191e !important;
    box-shadow: 0 28px 76px rgba(0, 0, 0, 0.58) !important;
}

body.theme-negro .images-modal-content h3 {
    color: #f8fafc !important;
}

body.theme-negro .images-modal-content .modal-subtitle {
    color: #aeb7c4 !important;
}

body.theme-negro .images-modal-content .upload-area {
    border-color: #59616e !important;
    background: #111318 !important;
}

body.theme-negro .images-modal-content .upload-area:hover,
body.theme-negro .images-modal-content .upload-area.drag-over {
    border-color: var(--accent-color) !important;
    background: color-mix(in srgb, var(--accent-color) 7%, #111318) !important;
}

body.theme-negro .images-modal-content .upload-content svg {
    color: var(--accent-color) !important;
}

body.theme-negro .images-modal-content .upload-content p {
    color: #f8fafc !important;
}

body.theme-negro .images-modal-content :is(.upload-content small, .selected-images h4) {
    color: #aeb7c4 !important;
}

body.theme-negro .images-modal-content .image-preview-item {
    border-color: #454b55 !important;
    background: #111318 !important;
}

body.theme-negro .images-modal-content > .form-buttons {
    border-top-color: #343941 !important;
    background: #17191e !important;
}

body.theme-negro .images-modal-content > .form-buttons .btn-cancel {
    border-color: #4a515d !important;
    background: #202329 !important;
    color: #d7dce4 !important;
}

body.theme-negro .images-modal-content > .form-buttons .btn-create {
    border-color: var(--accent-color) !important;
    background: var(--accent-color) !important;
    color: #ffffff !important;
}

body.theme-negro .images-modal-content > .form-buttons .btn-create:disabled {
    border-color: #3f4652 !important;
    background: #292d34 !important;
    color: #858f9d !important;
    opacity: 1 !important;
}

/* Estado de carga: evita tarjetas blancas dentro del panel oscuro. */
body.theme-negro .upload-status-modal {
    background: rgba(4, 5, 8, 0.8) !important;
}

body.theme-negro .upload-status-modal-content {
    border: 1px solid #3b414b !important;
    background: #17191e !important;
    box-shadow: 0 28px 76px rgba(0, 0, 0, 0.62) !important;
}

body.theme-negro .upload-status-title {
    color: #f8fafc !important;
}

body.theme-negro .upload-status-subtitle {
    color: #aeb7c4 !important;
}

body.theme-negro .upload-status-progress {
    border-color: #3f4652 !important;
    background: #111318 !important;
}

body.theme-negro .upload-status-progress-label {
    color: #d7dce4 !important;
}

body.theme-negro .upload-status-progress-bar {
    background: #343941 !important;
}

body.theme-negro .upload-status-item {
    border-color: #3f4652 !important;
    background: #202329 !important;
    color: #d7dce4 !important;
}

body.theme-negro .upload-status-item--uploading {
    border-color: color-mix(in srgb, var(--accent-color) 60%, #3f4652) !important;
    background: color-mix(in srgb, var(--accent-color) 8%, #202329) !important;
    color: #f8fafc !important;
}

body.theme-negro .upload-status-item--success {
    border-color: rgba(52, 211, 153, 0.45) !important;
    background: rgba(6, 78, 59, 0.22) !important;
    color: #a7f3d0 !important;
}

body.theme-negro .upload-status-item--error,
body.theme-negro .upload-status-errors {
    border-color: rgba(248, 113, 113, 0.5) !important;
    background: rgba(127, 29, 29, 0.2) !important;
    color: #fecaca !important;
}

body.theme-negro .upload-status-actions .crop-btn-primary {
    border: 1px solid var(--accent-color) !important;
    background: var(--accent-color) !important;
    color: #ffffff !important;
}
.grid-empty-banner {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    gap: 8px !important;
    padding: 28px 20px !important;
    border-radius: 16px !important;
    background: rgba(148, 163, 184, 0.08) !important;
    border: 1px dashed rgba(148, 163, 184, 0.28) !important;
}

.grid-empty-banner-title {
    font-size: 0.98rem !important;
    font-weight: 700 !important;
    color: var(--color-text-primary, #111827) !important;
}

.grid-empty-banner-text {
    font-size: 0.84rem !important;
    line-height: 1.45 !important;
    color: var(--color-text-muted, #6b7280) !important;
}

.grid-empty-banner-action {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-top: 4px !important;
    padding: 10px 16px !important;
    border-radius: 999px !important;
    border: 1px solid rgba(148, 163, 184, 0.45) !important;
    background: transparent !important;
    color: var(--color-text-primary, #111827) !important;
    font-size: 0.85rem !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
}

.grid-empty-banner-action:hover {
    background: rgba(255, 255, 255, 0.85) !important;
    border-color: rgba(100, 116, 139, 0.45) !important;
}

.grid-add-category-strip {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 10px !important;
    width: 100% !important;
    padding: 12px 14px 14px !important;
    border-radius: 12px !important;
    background: rgba(148, 163, 184, 0.06) !important;
    border: 1px dashed rgba(148, 163, 184, 0.28) !important;
    box-sizing: border-box !important;
    margin-bottom: 0 !important;
}

.grid-catalog-links-strip {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
    position: relative !important;
    width: 100% !important;
    padding: 12px 14px 14px !important;
    border-radius: 12px !important;
    background: rgba(148, 163, 184, 0.06) !important;
    border: 1px dashed rgba(148, 163, 184, 0.28) !important;
    box-sizing: border-box !important;
}

.grid-catalog-links-strip--visitor {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
}

.catalog-links-config-bar {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px 12px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    flex-wrap: nowrap !important;
    padding: 0  !important;
    margin: 0 !important;
}

.catalog-links-config-bar[hidden] {
    display: none !important;
}

.catalog-links-config-bar__title {
    font-size: 0.58rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    color: rgba(100, 116, 139, 0.92) !important;
    line-height: 1.25 !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
}
 
.catalog-links-config-bar__controls {
    display: inline-flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-end !important;
    flex-wrap: nowrap !important;
    gap: 6px !important;
    flex-shrink: 0 !important;
}

.catalog-links-segment {
    display: inline-flex !important;
    align-items: stretch !important;
    box-sizing: border-box !important;
    background: rgba(148, 163, 184, 0.12) !important;
    border: 1px solid rgba(148, 163, 184, 0.18) !important;
}

.catalog-links-segment--layout {
    flex-direction: row !important;
    border-radius: 7px !important;
    padding: 2px !important;
    gap: 0 !important;
    min-width: 0 !important;
}

.catalog-links-segment--scale {
    flex-direction: row !important;
    align-items: center !important;
    border-radius: 7px !important;
    padding: 2px !important;
    gap: 0 !important;
}

.catalog-links-segment__opt {
    margin: 0 !important;
    border: none !important;
    background: transparent !important;
    color: #64748b !important;
    font-size: 0.58rem !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    cursor: pointer !important;
    transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease !important;
    font-family: inherit !important;
}

.catalog-links-segment--layout .catalog-links-segment__opt {
    min-height: 24px !important;
    padding: 3px 7px !important;
    border-radius: 5px !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    white-space: nowrap !important;
}

.catalog-links-segment--layout .catalog-links-segment__opt.is-active {
    background: #fbfbfb !important;
    color: #434343 !important;
    font-weight: 700 !important;
    box-shadow: 0 0.5px 1px rgba(15, 23, 42, 0.09) !important;
  
}

.catalog-links-segment--layout .catalog-links-segment__opt:hover:not(.is-active) {
    color: #334155 !important;
}

.catalog-links-segment--scale .catalog-links-segment__opt--compact {
    width: 25px !important;
    min-width: 25px !important;
    min-height: 24px !important;
    padding: 3px !important;
    border-radius: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.catalog-links-segment--scale .catalog-links-segment__opt--compact:first-child {
    border-radius: 999px 0 0 999px !important;
}

.catalog-links-segment--scale .catalog-links-segment__opt--compact:last-child {
    border-radius: 0 999px 999px 0 !important;
    border-left: 1px solid rgba(148, 163, 184, 0.28) !important;
}

.catalog-links-segment--scale .catalog-links-segment__opt:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.65) !important;
    color: #111827 !important;
}

.catalog-links-segment__glyph {
    font-size: 0.68rem !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    display: inline-block !important;
    transform: translateY(-0.5px) !important;
}

.catalog-links-segment__opt:disabled,
.catalog-links-segment__opt[aria-disabled="true"] {
    opacity: 0.38 !important;
    cursor: not-allowed !important;
    pointer-events: none !important;
}

.catalog-links-toolbar {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    width: 100% !important;
    margin: 0 !important;
}

.catalog-links-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
    width: 100% !important;
    --catalog-links-font: 0.82rem !important;
    --catalog-links-icon: 22px !important;
    --catalog-links-min-height: 44px !important;
    --catalog-links-padding-y: 8px !important;
    --catalog-links-padding-x: 14px !important;
    --catalog-links-gap: 8px !important;
    padding-top: 0px !important;
} 
 
.grid-catalog-links-strip--with-config-bar .catalog-links-grid {
    padding-top: 0 !important;
}

.grid-catalog-links-strip--visitor .catalog-links-grid {
    padding-top: 0 !important;
}

.catalog-links-grid[data-scale-step="1"] {
    --catalog-links-font: 0.76rem !important;
    --catalog-links-icon: 20px !important;
    --catalog-links-min-height: 41px !important;
    --catalog-links-padding-y: 7px !important;
    --catalog-links-padding-x: 13px !important;
    --catalog-links-gap: 7px !important;
}
.catalog-links-grid[data-scale-step="2"] {
    --catalog-links-font: 0.72rem !important;
    --catalog-links-icon: 18px !important;
    --catalog-links-min-height: 38px !important;
    --catalog-links-padding-y: 6px !important;
    --catalog-links-padding-x: 12px !important;
    --catalog-links-gap: 6px !important;
}
.catalog-links-grid[data-scale-step="3"] {
    --catalog-links-font: 0.68rem !important;
    --catalog-links-icon: 16px !important;
    --catalog-links-min-height: 35px !important;
    --catalog-links-padding-y: 5px !important;
    --catalog-links-padding-x: 11px !important;
    --catalog-links-gap: 5px !important;
}
.catalog-links-grid[data-scale-step="4"] {
    --catalog-links-font: 0.64rem !important;
    --catalog-links-icon: 15px !important;
    --catalog-links-min-height: 32px !important;
    --catalog-links-padding-y: 4px !important;
    --catalog-links-padding-x: 10px !important;
    --catalog-links-gap: 4px !important;
}
.catalog-links-grid[data-scale-step="5"] {
    --catalog-links-font: 0.6rem !important;
    --catalog-links-icon: 14px !important;
    --catalog-links-min-height: 30px !important;
    --catalog-links-padding-y: 4px !important;
    --catalog-links-padding-x: 9px !important;
    --catalog-links-gap: 4px !important;
}
 
.catalog-links-grid--column {
    grid-template-columns: 1fr !important;
}

.catalog-links-grid--column .catalog-link-btn {
    grid-column: 1 !important;
    width: 100% !important;
    max-width: none !important;
    justify-self: stretch !important;
}

.catalog-link-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: var(--catalog-links-gap) !important;
    min-height: var(--catalog-links-min-height) !important;
    padding: var(--catalog-links-padding-y) var(--catalog-links-padding-x) !important;
    border-radius: 8px !important;
    border: 1px solid rgba(148, 163, 184, 0.45) !important;
    background: rgba(255, 255, 255, 0.95) !important;
    color: var(--color-text-primary, #111827) !important;
    font-size: var(--catalog-links-font) !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    box-sizing: border-box !important;
    cursor: pointer !important;
    transition: background 0.2s ease, border-color 0.2s ease !important;
    width: 100% !important;
}

.catalog-link-btn--visitor:hover {
    background: rgba(255, 255, 255, 1) !important;
    border-color: rgba(100, 116, 139, 0.55) !important;
}

.catalog-link-btn__icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: stretch !important;
    flex: 0 0 auto !important;
    line-height: 0 !important;
}

.category-config-bar {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    width: 100% !important;
}

.category-config-bar__title {
    min-width: 0 !important;
    color: rgba(100, 116, 139, 0.92) !important;
    font-size: 0.58rem !important;
    font-weight: 700 !important;
    line-height: 1.25 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
}

.category-order-open-btn {
    flex: 0 0 auto !important;
    min-height: 30px !important;
    padding: 6px 10px !important;
    border: 1px solid rgba(148, 163, 184, 0.38) !important;
    border-radius: 7px !important;
    background: rgba(255, 255, 255, 0.7) !important;
    color: #475569 !important;
    font-size: 0.68rem !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease !important;
}

.category-order-open-btn:hover {
    border-color: rgba(100, 116, 139, 0.58) !important;
    background: #fff !important;
    color: #1f2937 !important;
}

.category-config-actions {
    display: flex !important;
    justify-content: center !important;
    width: 100% !important;
}

.catalog-links-segment__opt:focus-visible,
.category-order-open-btn:focus-visible,
.catalog-links-add-btn:focus-visible {
    outline: 2px solid var(--accent-color, #ec4899) !important;
    outline-offset: 2px !important;
}

.category-order-modal[hidden] {
    display: none !important;
}

.category-order-modal {
    position: fixed !important;
    inset: 0 !important;
    z-index: 2147482600 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 18px !important;
    box-sizing: border-box !important;
}

.category-order-modal__backdrop {
    position: absolute !important;
    inset: 0 !important;
    background: rgba(15, 23, 42, 0.58) !important;
    backdrop-filter: blur(3px) !important;
}

.category-order-modal__panel {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    width: min(100%, 480px) !important;
    max-height: min(82dvh, 700px) !important;
    overflow: hidden !important;
    border: 1px solid rgba(148, 163, 184, 0.3) !important;
    border-radius: 18px !important;
    background: #fff !important;
    color: #111827 !important;
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.24) !important;
}

.category-order-modal__header {
    display: flex !important;
    flex: 0 0 auto !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 16px !important;
    padding: 22px 22px 16px !important;
    border-bottom: 1px solid #e5e7eb !important;
}

.category-order-modal__eyebrow {
    display: block !important;
    margin-bottom: 4px !important;
    color: #64748b !important;
    font-size: 0.66rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
}

.category-order-modal__title {
    margin: 0 !important;
    color: #111827 !important;
    font-size: 1.2rem !important;
    line-height: 1.25 !important;
}

.category-order-modal__close {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 34px !important;
    height: 34px !important;
    padding: 0 !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 50% !important;
    background: #f8fafc !important;
    color: #64748b !important;
    font-size: 1.15rem !important;
    cursor: pointer !important;
}

.category-order-modal__body {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    padding: 18px 22px 14px !important;
}

.category-order-modal__help {
    margin: 0 0 14px !important;
    color: #64748b !important;
    font-size: 0.82rem !important;
    line-height: 1.45 !important;
}

.category-order-list {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

.category-order-item {
    display: grid !important;
    grid-template-columns: 20px 30px minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 8px !important;
    min-height: 54px !important;
    padding: 8px 10px !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 12px !important;
    background: #fff !important;
    cursor: grab !important;
    transition: border-color 0.16s ease, background 0.16s ease, opacity 0.16s ease !important;
}

.category-order-item:hover {
    border-color: #cbd5e1 !important;
    background: #f8fafc !important;
}

.category-order-item.is-selected {
    border-color: var(--accent-color, #10b981) !important;
    background: color-mix(in srgb, var(--accent-color, #10b981) 7%, #fff) !important;
    box-shadow: inset 3px 0 0 var(--accent-color, #10b981) !important;
}

.category-order-item.is-selected .category-order-item__position {
    background: var(--accent-color, #10b981) !important;
    color: var(--accent-contrast-color, #fff) !important;
}

.category-order-item.is-selected .category-order-item__name {
    color: #111827 !important;
}

.category-order-item.is-dragging {
    opacity: 0.42 !important;
    cursor: grabbing !important;
}

.category-order-list.is-saving {
    opacity: 0.62 !important;
    pointer-events: none !important;
}

.category-order-item__handle {
    display: grid !important;
    grid-template-columns: repeat(2, 3px) !important;
    gap: 3px !important;
    justify-content: center !important;
}

.category-order-item__handle i {
    width: 3px !important;
    height: 3px !important;
    border-radius: 50% !important;
    background: #94a3b8 !important;
}

.category-order-item__position {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 28px !important;
    height: 28px !important;
    border-radius: 8px !important;
    background: #f1f5f9 !important;
    color: #64748b !important;
    font-size: 0.72rem !important;
    font-weight: 700 !important;
}

.category-order-item__name {
    overflow: hidden !important;
    color: #1f2937 !important;
    font-size: 0.9rem !important;
    font-weight: 650 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

.category-order-item__controls {
    display: inline-flex !important;
    gap: 5px !important;
}

.category-order-item__move {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 30px !important;
    height: 30px !important;
    padding: 0 !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 8px !important;
    background: #fff !important;
    color: #475569 !important;
    cursor: pointer !important;
}

.category-order-item__move:hover:not(:disabled) {
    border-color: var(--accent-color, #10b981) !important;
    color: var(--accent-color, #10b981) !important;
}

.category-order-item__move:disabled {
    opacity: 0.3 !important;
    cursor: default !important;
}

.category-order-modal__status {
    min-height: 18px !important;
    margin: 10px 2px 0 !important;
    color: #64748b !important;
    font-size: 0.74rem !important;
}

.category-order-modal__footer {
    position: relative !important;
    z-index: 2 !important;
    display: grid !important;
    flex: 0 0 auto !important;
    grid-template-columns: 1fr 1.15fr !important;
    gap: 10px !important;
    padding: 14px 22px 20px !important;
    border-top: 1px solid #e5e7eb !important;
    background: #fff !important;
}

.category-order-modal__button {
    min-height: 44px !important;
    padding: 10px 14px !important;
    border-radius: 10px !important;
    font-size: 0.86rem !important;
    font-weight: 700 !important;
    cursor: pointer !important;
}

.category-order-modal__button--secondary {
    border: 1px solid #e2e8f0 !important;
    background: #f8fafc !important;
    color: #334155 !important;
}

.category-order-modal__button--primary {
    border: 1px solid var(--accent-color, #10b981) !important;
    background: var(--accent-color, #10b981) !important;
    color: var(--accent-contrast-color, #fff) !important;
}

.category-order-modal__button:disabled {
    opacity: 0.42 !important;
    cursor: default !important;
}

body.category-order-modal-open {
    overflow: hidden !important;
}

.catalog-order-modal__panel {
    width: min(100%, 640px) !important;
}

.catalog-order-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 12px !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

.catalog-order-grid.is-saving {
    opacity: 0.62 !important;
    pointer-events: none !important;
}

.catalog-order-card {
    position: relative !important;
    min-width: 0 !important;
    overflow: hidden !important;
    border: 1px solid #dbe3ec !important;
    border-radius: 12px !important;
    background: #fff !important;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.06) !important;
    cursor: grab !important;
    touch-action: pan-y !important;
    user-select: none !important;
    transition: border-color 0.16s ease, box-shadow 0.16s ease, opacity 0.16s ease, transform 0.16s ease !important;
}

.catalog-order-card:hover,
.catalog-order-card.is-selected {
    border-color: color-mix(in srgb, var(--accent-color, #10b981) 55%, #cbd5e1) !important;
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.11) !important;
}

.catalog-order-card.is-dragging {
    z-index: 2 !important;
    opacity: 0.48 !important;
    cursor: grabbing !important;
    transform: scale(0.96) !important;
}

.catalog-order-card.is-touch-dragging {
    touch-action: none !important;
}

.catalog-order-card__preview {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    aspect-ratio: 4 / 5 !important;
    overflow: hidden !important;
    background: #f1f5f9 !important;
}

.catalog-order-card__image {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    pointer-events: none !important;
}

.catalog-order-card__handle {
    position: absolute !important;
    top: 8px !important;
    right: 8px !important;
    display: grid !important;
    grid-template-columns: repeat(2, 3px) !important;
    gap: 3px !important;
    width: 24px !important;
    height: 24px !important;
    place-content: center !important;
    border: 1px solid rgba(255, 255, 255, 0.65) !important;
    border-radius: 8px !important;
    background: rgba(15, 23, 42, 0.72) !important;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.18) !important;
}

.catalog-order-card__handle i {
    width: 3px !important;
    height: 3px !important;
    border-radius: 50% !important;
    background: #fff !important;
}

.catalog-order-card__footer {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 6px !important;
    padding: 7px 8px !important;
    border-top: 1px solid #e8edf3 !important;
}

.catalog-order-card__position {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 28px !important;
    height: 28px !important;
    padding: 0 7px !important;
    border-radius: 8px !important;
    background: color-mix(in srgb, var(--accent-color, #10b981) 11%, #f1f5f9) !important;
    color: color-mix(in srgb, var(--accent-color, #10b981) 72%, #1f2937) !important;
    font-size: 0.75rem !important;
    font-weight: 750 !important;
    font-variant-numeric: tabular-nums !important;
}

.catalog-order-card__controls {
    display: inline-flex !important;
    gap: 4px !important;
}

.catalog-order-card__move {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 28px !important;
    height: 28px !important;
    padding: 0 !important;
    border: 1px solid #dbe3ec !important;
    border-radius: 8px !important;
    background: #fff !important;
    color: #475569 !important;
    font-size: 0.82rem !important;
    cursor: pointer !important;
}

.catalog-order-card__move:hover:not(:disabled),
.catalog-order-card__move:focus-visible {
    border-color: var(--accent-color, #10b981) !important;
    color: var(--accent-color, #10b981) !important;
}

.catalog-order-card__move:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--accent-color, #10b981) 36%, transparent) !important;
    outline-offset: 1px !important;
}

.catalog-order-card__move:disabled {
    opacity: 0.28 !important;
    cursor: default !important;
}

@media (max-width: 360px) {
    .catalog-order-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .catalog-order-card {
        transition: none !important;
    }
}

@media (max-width: 520px) {
    .grid-catalog-links-strip,
    .grid-add-category-strip {
        gap: 10px !important;
        padding: 12px !important;
    }

    .grid-catalog-links-strip--visitor {
        padding: 0 !important;
    }

    .catalog-links-config-bar {
        align-items: flex-start !important;
        flex-direction: column !important;
        gap: 8px !important;
    }

    .catalog-links-config-bar__controls {
        justify-content: space-between !important;
        flex-wrap: nowrap !important;
        width: 100% !important;
    }

    .catalog-links-segment--layout .catalog-links-segment__opt {
        min-height: 32px !important;
        padding: 6px 10px !important;
        font-size: 0.64rem !important;
    }

    .catalog-links-segment--scale .catalog-links-segment__opt--compact {
        width: 32px !important;
        min-width: 32px !important;
        min-height: 32px !important;
    }

    .category-order-open-btn {
        min-height: 36px !important;
        padding: 8px 11px !important;
        font-size: 0.7rem !important;
    }

    .category-order-modal {
        align-items: flex-end !important;
        padding: 10px !important;
    }

    .category-order-modal__panel {
        width: 100% !important;
        max-height: calc(100vh - 20px) !important;
        max-height: 88dvh !important;
        border-radius: 18px 18px 12px 12px !important;
    }

    .category-order-modal__header,
    .category-order-modal__body {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    .category-order-modal__footer {
        padding-left: 16px !important;
        padding-right: 16px !important;
        padding-bottom: max(14px, env(safe-area-inset-bottom)) !important;
    }
}

.catalog-link-btn .mc-cli-svg {
    width: var(--catalog-links-icon) !important;
    height: var(--catalog-links-icon) !important;
    flex-shrink: 0 !important;
}

/* Iconos por trazo (stroke);  alineados con EJEMPLOS/ICONOS.html — ver regla global svg { fill } arriba */
.mc-cli-svg[fill="none"],
.mc-cli-svg[fill="none"] circle,
.mc-cli-svg[fill="none"] line,
.mc-cli-svg[fill="none"] path,
.mc-cli-svg[fill="none"] polyline,
.mc-cli-svg[fill="none"] rect {
    fill: none !important;
    stroke: currentColor !important;
}

.catalog-link-btn__text {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    min-width: 0 !important;
}

.catalog-links-grid:not(.catalog-links-grid--column) .catalog-link-btn:last-child:nth-child(odd):not(:only-child) {
    grid-column: 1 / -1 !important;
    justify-self: center !important;
    width: 50% !important;
    max-width: 320px !important;
}

.catalog-links-grid .catalog-link-btn:only-child {
    grid-column: 1 / -1 !important;
    justify-self: stretch !important;
    width: 100% !important;
    max-width: none !important;
}

.catalog-links-add-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    align-self: center !important;
    width: min(100%, 320px) !important;
    min-height: 36px !important;
    padding: 8px 14px !important;
    border: 1px dashed rgba(148, 163, 184, 0.38) !important;
    border-radius: 9px !important;
    background: rgba(255, 255, 255, 0.72) !important;
    color: #374151 !important;
    box-sizing: border-box !important;
    font-size: 0.72rem !important;
    font-weight: 650 !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
    cursor: pointer !important;
    transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease !important;
}

.catalog-links-add-btn:hover {
    background: #ffffff !important;
    border-color: rgba(100, 116, 139, 0.58) !important;
    color: #111827 !important;
}

@media (max-width: 520px) {
    .catalog-links-add-btn {
        width: 100% !important;
        max-width: none !important;
        min-height: 42px !important;
        padding: 10px 14px !important;
        font-size: 0.76rem !important;
    }
}

.catalog-link-modal[hidden] {
    display: none !important;
}

.catalog-link-modal {
    position: fixed !important;
    inset: 0 !important;
    z-index: 10060 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 16px !important;
}

.catalog-link-icon-modal {
    z-index: 10070 !important;
}

.catalog-link-modal__backdrop {
    position: absolute !important;
    inset: 0 !important;
    background: rgba(15, 23, 42, 0.45) !important;
}

.catalog-link-modal__panel {
    position: relative !important;
    z-index: 1 !important;
    width: 100% !important;
    max-width: 400px !important;
    max-height: 90vh !important;
    overflow: auto !important;
    background: var(--surface, #fff) !important;
    border-radius: 16px !important;
    padding: 20px !important;
    box-shadow: 0 20px 50px rgba(15, 23, 42, 0.2) !important;
}

.catalog-link-modal__panel--icons {
    max-width: min(420px, 100%) !important;
}

.catalog-link-modal__title {
    margin: 0 0 16px !important;
    font-size: 1.1rem !important;
    font-weight: 700 !important;
    color: var(--color-text-primary, #111827) !important;
}

.catalog-link-form__field {
    margin-bottom: 14px !important;
}

.catalog-link-form__label {
    display: block !important;
    font-size: 0.75rem !important;
    font-weight: 600 !important;
    color: var(--color-text-muted, #6b7280) !important;
    margin-bottom: 6px !important;
}

.catalog-link-form__input {
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 10px 12px !important;
    border-radius: 10px !important;
    border: 1px solid rgba(148, 163, 184, 0.45) !important;
    font-size: 0.9rem !important;
}

.catalog-link-icon-trigger {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    width: 100% !important;
    padding: 10px 12px !important;
    border-radius: 10px !important;
    border: 1px dashed rgba(148, 163, 184, 0.5) !important;
    background: rgba(248, 250, 252, 0.9) !important;
    cursor: pointer !important;
    font-size: 0.85rem !important;
    color: var(--color-text-muted, #6b7280) !important;
}

.catalog-link-icon-trigger__preview {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 40px !important;
    height: 40px !important;
    color: var(--color-text-primary, #111827) !important;
}

.catalog-link-icon-trigger__preview .mc-cli-svg {
    width: 28px !important;
    height: 28px !important;
}

.catalog-link-form__actions {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    justify-content: flex-end !important;
    margin-top: 18px !important;
}

.catalog-link-form__btn {
    padding: 8px 14px !important;
    border-radius: 999px !important;
    border: 1px solid rgba(148, 163, 184, 0.45) !important;
    background: transparent !important;
    font-size: 0.85rem !important;
    font-weight: 600 !important;
    cursor: pointer !important;
}

.catalog-link-form__btn--primary {
    background: var(--accent-color, #10b981) !important;
    color: #fff !important;
    border-color: transparent !important;
}

.catalog-link-form__btn--danger {
    color: #b91c1c !important;
    border-color: rgba(185, 28, 28, 0.35) !important;
    margin-right: auto !important;
}

.catalog-links-icon-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)) !important;
    gap: 10px !important;
    max-height: 55vh !important;
    overflow-y: auto !important;
}

.catalog-links-icon-option {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    padding: 10px 6px !important;
    border-radius: 10px !important;
    border: 1px solid rgba(148, 163, 184, 0.35) !important;
    background: #fff !important;
    cursor: pointer !important;
    color: var(--color-text-primary, #111827) !important;
    transition: border-color 0.2s ease, background 0.2s ease !important;
}

.catalog-links-icon-option:hover {
    border-color: var(--accent-color, #10b981) !important;
    background: rgba(16, 185, 129, 0.06) !important;
}

.catalog-links-icon-option .mc-cli-svg {
    width: 26px !important;
    height: 26px !important;
}

.catalog-links-icon-option--no-label {
    min-height: 72px !important;
}

.catalog-links-icon-option__text {
    font-size: 9px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.02em !important;
    color: var(--color-text-muted, #6b7280) !important;
    text-align: center !important;
    line-height: 1.2 !important;
}

body.catalog-link-modal-open {
    overflow: hidden !important;
}

.bottom-menu-item:disabled,
.bottom-menu-item.is-disabled {
    opacity: 0.5 !important;
    cursor: not-allowed !important;
    pointer-events: none !important;
}

.bottom-menu-item:disabled .menu-icon,
.bottom-menu-item.is-disabled .menu-icon {
    opacity: 0.75 !important;
}

/* Delete categoría: acción de sección (all/carousel) */
.grid-category-section {
    position: relative !important;
}

.catalog-link-form.is-automatic .catalog-link-icon-trigger:disabled {
    opacity: 1 !important;
    cursor: default !important;
}

body.is-catalog-owner .grid-category-section {
    padding-top: 7px !important;
}

body.is-catalog-owner .grid-category-section > .grid-category-header {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto auto !important;
    align-items: center !important;
    row-gap: 12px !important;
    margin-bottom: 8px !important;
}

body.is-catalog-owner .grid-category-section > .grid-category-header .grid-category-heading {
    grid-column: 1 !important;
    grid-row: 1 !important;
    width: 100% !important;
    box-sizing: border-box !important;
    padding-right: 38px !important;
}

body.is-catalog-owner .grid-category-section > .grid-category-header .grid-category-actions {
    grid-column: 1 !important;
    grid-row: 2 !important;
    justify-self: stretch !important;
    justify-content: space-between !important;
    width: 100% !important;
    margin-left: 0 !important;
}

body.is-catalog-owner .grid-category-section > .grid-category-header .grid-category-controls {
    margin-left: 12px !important;
}

.grid-category-section > .delete-category-btn--grid {
    position: absolute !important;
    top: 8px !important;
    right: 8px !important;
    left: auto !important;
    transform: none !important;
    width: 22px !important;
    height: 22px !important;
    border-radius: 2px !important;
    background: #ffffff !important;
    color: #dc2626 !important; 
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    padding: 0 !important;
    line-height: 0 !important;
    z-index: 6 !important;
    opacity: 0.92 !important;
}

.grid-category-section > .delete-category-btn--grid:hover {
    background: #fef2f2 !important;
    color: #b91c1c !important;
    border-color: rgba(220, 38, 38, 0.4) !important;
    opacity: 1 !important;
}

.grid-category-section > .delete-category-btn--grid:active {
    transform: scale(0.95) !important;
}

.grid-category-section > .delete-category-btn--grid .delete-category-grid-x {
    position: relative !important;
    display: block !important;
    flex: 0 0 10px !important;
    width: 10px !important;
    height: 10px !important;
    font-size: 0 !important;
    line-height: 0 !important;
    transform: none !important;
}

.grid-category-section > .delete-category-btn--grid .delete-category-grid-x::before,
.grid-category-section > .delete-category-btn--grid .delete-category-grid-x::after {
    content: '' !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    width: 10px !important;
    height: 2px !important;
    border-radius: 999px !important;
    background: currentColor !important;
    transform-origin: center !important;
}

.grid-category-section > .delete-category-btn--grid .delete-category-grid-x::before {
    transform: translate(-50%, -50%) rotate(45deg) !important;
}

.grid-category-section > .delete-category-btn--grid .delete-category-grid-x::after {
    transform: translate(-50%, -50%) rotate(-45deg) !important;
}

.grid-category-section > .delete-category-btn--grid + .grid-category-header .grid-category-actions {
    margin-right: 0 !important;
    padding-right: 0 !important;
}

.grid-category-section > .delete-category-btn--grid + .grid-category-header .grid-category-add-btn {
    margin-right: 0 !important;
}

@media (max-width: 768px) {
    body.is-catalog-owner .grid-category-section > .grid-category-header .grid-category-actions {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        align-items: stretch !important;
        justify-content: stretch !important;
        gap: 8px !important;
        width: 100% !important;
        padding-right: 0 !important;
    }

    body.is-catalog-owner .grid-category-controls {
        width: 100% !important;
        margin-left: 0 !important;
    }

    body.is-catalog-owner .grid-category-primary-actions {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 36px !important;
        align-items: stretch !important;
        gap: 6px !important;
        width: 100% !important;
        margin-left: 0 !important;
    }

    body.is-catalog-owner .grid-category-primary-actions > :is(
        .grid-category-add-btn,
        .grid-category-order-btn,
        .grid-category-discount-btn
    ) {
        width: 100% !important;
        min-width: 0 !important;
    }

    .grid-category-section > .delete-category-btn--grid + .grid-category-header .grid-category-add-btn {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
}

/* Selector de diseños: el ícono seleccionado debe verse sobre fondos claros. */
.catalog-theme-btn.selected .icon-style-preview,
.catalog-theme-btn.selected .icon-style-preview svg,
.catalog-theme-btn.selected .icon-style-preview svg * {
    color: var(--accent-color, #4caf50) !important;
    fill: var(--accent-color, #4caf50) !important;
}

/* Herramientas de cada categoría: identidad arriba, controles y acción debajo. */
body.is-catalog-owner .grid-category-section {
    padding: 10px 8px 8px !important;
    border-radius: 12px !important;
}

body.is-catalog-owner .grid-category-section > .grid-category-header {
    row-gap: 10px !important;
    margin-bottom: 10px !important;
    padding: 0 2px !important;
}

body.is-catalog-owner .grid-category-section > .grid-category-header .grid-category-heading {
    gap: 8px !important;
    margin-left: 0 !important;
    padding-right: 34px !important;
}

body.is-catalog-owner .grid-category-title-wrap {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    max-width: min(65%, 240px) !important;
    margin-left: -10px !important;
}

body.is-catalog-owner .grid-category-discount-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    min-height: 32px;
    padding: 0;
    border: 1px solid color-mix(in srgb, var(--accent-color, #ec4899) 42%, #dbe2ea);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.78);
    color: var(--accent-color, #ec4899);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
    cursor: pointer;
    flex: 0 0 auto;
    font-size: 0.68rem;
    font-weight: 650;
    line-height: 1;
    transition: color 0.16s ease, border-color 0.16s ease, background 0.16s ease;
}

body.is-catalog-owner .grid-category-discount-btn:hover,
body.is-catalog-owner .grid-category-discount-btn:focus-visible,
body.is-catalog-owner .grid-category-discount-btn.has-discount {
    border-color: color-mix(in srgb, var(--accent-color, #ec4899) 48%, #ffffff);
    background: color-mix(in srgb, var(--accent-color, #ec4899) 9%, #ffffff);
    color: var(--accent-color, #ec4899);
}

body.is-catalog-owner .grid-category-discount-btn:hover {
    background: color-mix(in srgb, var(--accent-color, #ec4899) 7%, #ffffff);
}

body.is-catalog-owner .grid-category-discount-btn svg {
    flex: 0 0 auto;
}

body.is-catalog-owner .grid-category-discount-btn:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--accent-color, #ec4899) 38%, transparent);
    outline-offset: 2px;
}

body.is-catalog-owner .grid-category-title {
    min-width: 120px !important;
    padding: 5px 16px !important;
    border-radius: 0 12px 12px 0 !important;
    box-sizing: border-box !important;
    font-size: 0.76rem !important;
    line-height: 1.2 !important;
    text-align: center !important;
}

body.is-catalog-owner .grid-category-meta {
    position: relative !important;
    z-index: auto !important;
    margin: 0 !important;
    padding: 4px 10px !important;
    border-radius: 999px !important;
    background: rgba(255, 255, 255, 0.76) !important;
    box-sizing: border-box !important;
    font-size: 0.68rem !important;
    line-height: 1.2 !important;
}

body.is-catalog-owner .grid-category-section > .grid-category-header .grid-category-actions {
    align-items: flex-end !important;
    gap: 10px !important;
}

body.is-catalog-owner .grid-category-primary-actions {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-left: auto;
}

body.is-catalog-owner .grid-category-section > .grid-category-header .grid-category-controls {
    margin-left: 0 !important;
}

body.is-catalog-owner .grid-display-mode-wrapper {
    gap: 4px !important;
}

body.is-catalog-owner .grid-display-mode-label {
    margin: 0 0 0 3px !important;
    font-size: 0.54rem !important;
    line-height: 1 !important;
    letter-spacing: 0.12em !important;
    font-weight: 700 !important;
}

body.is-catalog-owner .grid-display-toggle {
    gap: 0 !important;
    padding: 2px !important;
    border: 1px solid rgba(148, 163, 184, 0.2) !important;
    border-radius: 7px !important;
}

body.is-catalog-owner .grid-display-pill {
    min-height: 28px !important;
    padding: 5px 10px !important;
    border-radius: 5px !important;
    font-size: 0.62rem !important;
    line-height: 1.2 !important;
}

body.is-catalog-owner .grid-category-add-btn {
    min-height: 32px !important;
    padding: 7px 12px !important;
    border-radius: 8px !important;
    font-size: 0.68rem !important;
    line-height: 1.2 !important;
}

body.is-catalog-owner .grid-category-order-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;
    min-height: 32px !important;
    padding: 7px 11px !important;
    border: 1px solid color-mix(in srgb, var(--accent-color, #ec4899) 34%, #dbe2ea) !important;
    border-radius: 8px !important;
    background: color-mix(in srgb, var(--accent-color, #ec4899) 5%, #ffffff) !important;
    color: color-mix(in srgb, var(--accent-color, #ec4899) 78%, #334155) !important;
    font-size: 0.68rem !important;
    font-weight: 650 !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
    cursor: pointer !important;
    transition: color 0.16s ease, border-color 0.16s ease, background 0.16s ease !important;
}

body.is-catalog-owner .grid-category-order-btn:hover {
    border-color: var(--accent-color, #ec4899) !important;
    background: color-mix(in srgb, var(--accent-color, #ec4899) 10%, #ffffff) !important;
}

body.is-catalog-owner .grid-category-action-label--compact {
    display: none;
}

body.is-catalog-owner .grid-category-section > .delete-category-btn--grid {
    top: 9px !important;
    right: 9px !important;
    width: 26px !important;
    height: 26px !important;
    border: 1px solid rgba(220, 38, 38, 0.12) !important;
    border-radius: 7px !important;
}

body.is-catalog-owner :is(
    .grid-display-pill,
    .grid-category-add-btn,
    .grid-category-order-btn,
    .grid-category-discount-btn,
    .delete-category-btn--grid
):focus-visible {
    outline: 2px solid var(--accent-color, #ec4899) !important;
    outline-offset: 2px !important;
}

@media (max-width: 520px) {
    body.is-catalog-owner .grid-category-section {
        padding: 9px 7px 7px !important;
    }

    body.is-catalog-owner .grid-category-section > .grid-category-header {
        row-gap: 9px !important;
        margin-bottom: 9px !important;
        padding: 0 1px !important;
    }

    body.is-catalog-owner .grid-category-section > .grid-category-header .grid-category-heading {
        padding-right: 34px !important;
    }

    body.is-catalog-owner .grid-category-title-wrap {
        max-width: min(62%, 210px) !important;
    }

    body.is-catalog-owner .grid-category-title {
        min-width: 100px !important;
        padding: 5px 12px !important;
        font-size: 0.72rem !important;
    }

    body.is-catalog-owner .grid-category-meta {
        padding: 3px 8px !important;
        font-size: 0.62rem !important;
    }

    body.is-catalog-owner .grid-category-section > .grid-category-header .grid-category-actions {
        gap: 8px !important;
    }

    body.is-catalog-owner .grid-display-pill {
        min-height: 32px !important;
        padding: 6px 10px !important;
        font-size: 0.64rem !important;
    }

    body.is-catalog-owner :is(.grid-category-add-btn, .grid-category-order-btn, .grid-category-discount-btn) {
        min-height: 36px !important;
        padding: 8px 11px !important;
        font-size: 0.68rem !important;
    }

    body.is-catalog-owner .grid-category-discount-btn {
        width: 36px !important;
        padding: 0 !important;
    }

    body.is-catalog-owner .grid-category-primary-actions {
        gap: 6px;
    }

    body.is-catalog-owner .grid-category-section > .delete-category-btn--grid {
        top: 8px !important;
        right: 8px !important;
        width: 28px !important;
        height: 28px !important;
    }
}

@media (max-width: 380px) {
    body.is-catalog-owner .grid-category-section > .grid-category-header .grid-category-actions {
        flex-direction: column !important;
        align-items: stretch !important;
    }

    body.is-catalog-owner .grid-category-controls,
    body.is-catalog-owner .grid-display-mode-wrapper,
    body.is-catalog-owner .grid-display-toggle,
    body.is-catalog-owner .grid-category-primary-actions {
        width: 100% !important;
    }

    body.is-catalog-owner .grid-category-primary-actions > .grid-category-add-btn {
        flex: 1 1 auto;
    }

    body.is-catalog-owner .grid-category-primary-actions > .grid-category-order-btn {
        flex: 1 1 auto;
    }

    body.is-catalog-owner .grid-category-primary-actions > .grid-category-discount-btn {
        flex: 0 0 36px;
    }

    body.is-catalog-owner .grid-display-pill {
        flex: 1 1 50% !important;
    }
}

@media (max-width: 340px) {
    body.is-catalog-owner .grid-category-primary-actions {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr) 34px !important;
        gap: 5px !important;
    }

    body.is-catalog-owner :is(.grid-category-add-btn, .grid-category-order-btn) {
        padding-right: 6px !important;
        padding-left: 6px !important;
        font-size: 0.62rem !important;
    }

    body.is-catalog-owner .grid-category-discount-btn {
        width: 34px !important;
    }

    body.is-catalog-owner .grid-category-action-label--full {
        display: none;
    }

    body.is-catalog-owner .grid-category-action-label--compact {
        display: inline;
    }
}

/* Sistema tipográfico del catálogo: Montserrat con jerarquía compacta y legible. */
.business-name,
.grid-category-title,
.grid-empty-banner-title,
.category-order-modal__title,
.modern-confirm-title {
    font-family: var(--font-family-ui) !important;
    font-weight: 600 !important;
    letter-spacing: -0.015em;
}

.catalog-links-config-bar__title,
.category-config-bar__title,
.grid-display-mode-label,
.category-order-modal__eyebrow {
    font-family: var(--font-family-ui) !important;
    font-weight: 600 !important;
    letter-spacing: 0.075em;
}

.nav-btn,
.category-nav-btn,
.catalog-link-btn,
.catalog-links-add-btn,
.catalog-links-segment__opt,
.category-order-open-btn,
.category-order-modal__button,
.grid-display-pill,
.grid-category-add-btn,
.grid-category-order-btn,
.grid-empty-banner-action,
.add-product-btn,
.classic-product-button__meta,
.classic-product-button__action-label,
.classic-product-button__status {
    font-family: var(--font-family-ui) !important;
    font-weight: 600 !important;
    letter-spacing: -0.01em;
}

.grid-product-info-name,
.product-name,
.product-list-container .product-item-name,
.classic-product-button__name,
.category-order-item__name {
    font-family: var(--font-family-ui) !important;
    font-weight: 500 !important;
    line-height: 1.35 !important;
    letter-spacing: -0.012em;
}

.grid-category-meta,
.product-attribute,
.classic-product-button__attribute,
.category-order-modal__help,
.category-order-modal__status {
    font-family: var(--font-family-ui) !important;
    font-weight: 500 !important;
    line-height: 1.4;
}

.grid-product-info-price,
.grid-product-info-price-current,
.grid-product-info-price-new,
.product-price,
.product-list-container .product-item-price,
.classic-product-button__price,
.classic-product-button__price-old {
    font-family: var(--font-family-data) !important;
    font-weight: 600 !important;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
}