/* =========================================
   1. ESTILOS MINICART Y AGRUPACIÓN
   ========================================= */
.sf-minicart-trigger { display: flex; align-items: center; gap: 8px; font-weight: bold; color: #fff; text-decoration: none; cursor: pointer; position: relative; }
.sf-count { background: #4A8C8C; color: white; border-radius: 50%; width: 18px; height: 18px; display: flex; align-items: center; justify-content: center; font-size: 10px; }
.sf-minicart-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.4) !important; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); z-index: 999998 !important; opacity: 0; visibility: hidden; transition: 0.3s; }
.sf-minicart-overlay.sf-active { opacity: 1; visibility: visible; }

/* AJUSTE DE SCROLL EN SIDECART */
.sf-minicart-drawer { position: fixed; top: 0; right: -450px; width: 100%; max-width: 420px; height: 100vh; background: #fff !important; z-index: 999999 !important; transition: 0.4s ease-in-out; display: flex; flex-direction: column; box-shadow: -10px 0 30px rgba(0,0,0,0.2); }
.sf-minicart-drawer.sf-open { 
    right: 0 !important; 
    overflow-y: scroll !important; /* Habilita Scroll Y */
    overflow-x: scroll !important; /* Forzado Scroll X Solicitado */
}

/* La cabecera toma su color dinámico, si no, usa el predeterminado */
.sf-header { background: #172A2E !important; color: white !important; padding: 15px 15px !important; display: flex !important; justify-content: space-between !important; align-items: center !important; }
.sf-close { background: transparent !important; border: none !important; color: white !important; font-size: 34px !important; cursor: pointer !important; line-height: 1 !important; margin: 0 !important; padding: 0 !important; font-weight: 200 !important;}
.sf-minicart-drawer * { text-align: left !important; box-sizing: border-box !important; }
.sf-shipping-info { background: #FDF9F1 !important; padding: 15px !important; border-bottom: 1px solid #eee !important; }
.sf-shipping-info p { margin: 0 0 10px !important; font-size: 13px !important; color: #333 !important; text-align: center !important;}
.sf-bar-bg { background: #EBE4D5 !important; height: 4px !important; border-radius: 2px !important; width: 90% !important; margin: 0 auto !important; overflow: hidden !important; }
.sf-bar-fill { background: #4A8C8C !important; height: 100% !important; transition: 0.8s ease !important; }

/* Estilos de la zona escrolleable */
.sf-body { flex: 1; overflow-y: auto; padding: 20px; display: flex; flex-direction: column; }
.sf-body::-webkit-scrollbar { width: 6px; }
.sf-body::-webkit-scrollbar-track { background: transparent; }
.sf-body::-webkit-scrollbar-thumb { background: #d1d1d1; border-radius: 10px; }
.sf-body::-webkit-scrollbar-thumb:hover { background: #4A8C8C; }

/* Item Normal */
.sf-cart-item { display: flex !important; gap: 15px !important; padding-bottom: 20px !important; margin-bottom: 20px !important; border-bottom: 1px solid #f5f5f5 !important; align-items: flex-start !important; }
.sf-item-img img { width: 75px !important; height: 75px !important; object-fit: cover !important; border-radius: 8px !important; margin: 0 !important;}
.sf-item-details { flex: 1 !important; display: flex !important; flex-direction: column !important; align-items: flex-start !important; }
.sf-item-title { font-weight: 600 !important; font-size: 15px !important; color: #172A2E !important; margin-bottom: 2px !important; }
.sf-item-meta { font-size: 11px !important; color: #4A6E75 !important; text-transform: uppercase !important; margin-bottom: 5px !important;}
.sf-item-qty { display: flex !important; align-items: center !important; gap: 8px !important; margin-top: 5px !important; }
.sf-qty-controls { background: #f4f4f4 !important; border: 1px solid #e0e0e0 !important; border-radius: 4px !important; display: flex !important; align-items: center !important; }
.sf-qty-change { background: transparent !important; border: none !important; padding: 2px 8px !important; cursor: pointer !important; color: #172A2E !important; font-weight: bold !important; font-size: 16px !important; }
.sf-qty-change:hover { opacity: 0.6 !important; }
.sf-item-price-remove { text-align: right !important; display: flex !important; flex-direction: column !important; justify-content: space-between !important; height: 75px !important; align-items: flex-end !important;}
.sf-remove { text-decoration: none !important; color: #bbb !important; font-size: 24px !important; font-weight: 200 !important; transition: 0.2s !important; line-height: 0.8 !important;}
.sf-remove:hover { color: #ff4a4a !important; }
.sf-price { font-weight: 700 !important; color: #172A2E !important; text-align: right !important;}

/* Item Bundle (Grupo) */
.sf-bundle-group { display: flex !important; flex-direction: column !important; background: #fafafa !important; border: 1px solid #eee !important; border-radius: 12px !important; padding: 15px !important; gap: 10px !important; align-items: stretch !important; border-bottom: none !important;}
.sf-bundle-header { display: flex !important; justify-content: space-between !important; align-items: center !important; border-bottom: 1px solid #eee !important; padding-bottom: 10px !important; }
.sf-bundle-title { font-weight: 700 !important; color: #172A2E !important; font-size: 15px !important; display: flex !important; align-items: center !important; gap: 8px !important; }
.sf-remove-bundle { color: #bbb !important; font-size: 26px !important; text-decoration: none !important; line-height: 1 !important; transition: 0.2s !important; font-weight: 200 !important;}
.sf-remove-bundle:hover { color: #ff4a4a !important; }
.sf-bundle-items { display: flex !important; flex-direction: column !important; gap: 8px !important; }
.sf-bundle-subitem { display: flex !important; align-items: center !important; gap: 10px !important; }
.sf-bundle-subitem img { width: 35px !important; height: 35px !important; border-radius: 6px !important; object-fit: cover !important; margin: 0 !important; }
.sf-bundle-subitem-name { flex: 1 !important; font-size: 12px !important; color: #444 !important; font-weight: 500 !important; line-height: 1.2 !important; display: -webkit-box !important; -webkit-line-clamp: 2 !important; -webkit-box-orient: vertical !important; overflow: hidden !important; }
.sf-bundle-subitem-qty { font-size: 12px !important; color: #888 !important; font-weight: 600 !important; }
.sf-bundle-footer { display: flex !important; justify-content: space-between !important; align-items: center !important; margin-top: 5px !important; padding-top: 10px !important; border-top: 1px dashed #eee !important; }
.sf-bundle-meta { font-size: 11px !important; color: #4A8C8C !important; font-weight: 600 !important; text-transform: uppercase !important; }

/* Totales */
.sf-summary { margin-top: auto; padding-top: 20px; border-top: 1px solid #eee; }
.sf-row { display: flex !important; justify-content: space-between !important; margin-bottom: 8px !important; font-size: 14px !important; color: #666 !important; }
.sf-total { font-weight: 800 !important; color: #172A2E !important; font-size: 18px !important; padding-top: 10px !important; border-top: 1px dashed #eee !important; align-items: center !important;}
.sf-row span:last-child { text-align: right !important; }

/* BOTONES DE PAGO (Rediseño Checkout a Blanco y Link al Carrito) */
.sf-btn-cart { background: #000 !important; color: #fff !important; border: none !important; padding: 14px !important; border-radius: 8px !important; font-weight: 600 !important; width: 100% !important; margin-bottom: 10px !important; cursor: pointer !important; text-align: center !important; text-decoration: none !important; display: block !important; transition: 0.3s;}
.sf-btn-cart:hover { opacity: 0.8 !important; }
.sf-btn-checkout { background: #fff !important; color: #172A2E !important; border: 2px solid #172A2E !important; text-decoration: none !important; text-align: center !important; padding: 14px !important; border-radius: 8px !important; font-weight: 600 !important; display: block !important; transition: 0.3s;}
.sf-btn-checkout:hover { background: #f5f5f5 !important; }
.sf-secure { text-align: center !important; color: #aaa !important; margin-top: 15px !important; font-size: 11px !important; display: block !important;}


/* =========================================
   2. ESTILOS BUNDLES APP (Creador de Kits)
   ========================================= */
#sf-bundle-app { font-family: inherit; color: #172A2E; max-width: 1200px; margin: 0 auto; padding: 0 20px; box-sizing: border-box; }
#sf-bundle-app * { box-sizing: border-box; }
.sfb-tabs-wrapper { display: flex; justify-content: center; margin-bottom: 40px; }
.sfb-tabs { display: flex; gap: 20px; }
.sfb-tab { background: #fff; border: 2px solid transparent; border-radius: 12px; padding: 15px 35px; text-align: center; cursor: pointer; box-shadow: 0 4px 20px rgba(0,0,0,0.04); transition: all 0.3s ease; display: flex; flex-direction: column; align-items: center; }
.sfb-tab[data-type="3"].active { border-color: rgb(39, 102, 125) !important; }
.sfb-tab[data-type="5"].active { border-color: rgb(237, 205, 105) !important; }
.sfb-tab-title { font-size: 20px; font-weight: 800; color: rgb(39, 102, 125) !important; line-height: 1.2; margin-bottom: 8px; }
.sfb-tab-badge { font-size: 11px; font-weight: 800; padding: 4px 12px; border-radius: 20px; letter-spacing: 0.5px;}
.badge-blue { background: #E0F7FA; color: #00838F; }
.badge-yellow { background: #FFF8E1; color: #F9A825; }
.sfb-layout { display: flex; gap: 40px; align-items: flex-start; }
.sfb-main { flex: 1; min-width: 0; }
.sfb-main-title { font-size: 18px; font-weight: 600; color: #172A2E; margin-bottom: 20px; text-align: left;}
.sfb-grid { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)) !important; gap: 20px !important; }
.sfb-product-card { background: #fff; border: 1px solid #f0f0f0; border-radius: 16px; padding: 20px 15px; text-align: center; box-shadow: 0 2px 10px rgba(0,0,0,0.02); display: flex; flex-direction: column; align-items: center; transition: transform 0.2s; }
.sfb-product-card:hover { transform: translateY(-3px); box-shadow: 0 8px 20px rgba(0,0,0,0.05); }
.sfb-img-wrapper { width: 110px; height: 110px; margin-bottom: 15px; border-radius: 8px; overflow: hidden; }
.sfb-img-wrapper img { width: 100%; height: 100%; object-fit: cover; }
.sfb-prod-title { font-size: 13px; font-weight: 600; color: #172A2E; margin-bottom: 8px; line-height: 1.3; }
.sfb-prod-price { font-size: 13px; color: #888; font-weight: 500; margin-bottom: 15px; }

/* BOTÓN + CIRCULAR CERO PADDING REAJUSTADO */
.sfb-add-btn { 
    width: 36px !important; height: 36px !important; border-radius: 50% !important; 
    background: #fff !important; border: 1px solid #e0e6e6 !important; color: #888 !important; 
    display: flex !important; align-items: center !important; justify-content: center !important; 
    font-size: 24px !important; font-weight: 300 !important; cursor: pointer !important; transition: 0.2s !important; 
    margin: auto auto 0 auto !important; padding: 0 !important; line-height: 1 !important;
}
.sfb-add-btn:hover:not(:disabled) { background: #4A8C8C !important; color: #fff !important; border-color: #4A8C8C !important; }
.sfb-add-btn:disabled { opacity: 0.3 !important; cursor: not-allowed !important; }

/* SIDEBAR MÁS ANCHA Y ESTILIZADA CON TOP AUMENTADO */
.sfb-sidebar { 
    width: 380px; 
    background: #fff; 
    border-radius: 16px; 
    padding: 25px; 
    box-shadow: 0 5px 30px rgba(0,0,0,0.06); 
    position: sticky; 
    top: 90px; /* Evita sobrelaparse con el Header */
    flex-shrink: 0; 
    margin-top: 15px;
}
.sfb-sidebar-header { display: flex; align-items: center; gap: 12px; margin-bottom: 25px; }
.sfb-sidebar-icon { width: 32px; height: 32px; background: #172A2E; border-radius: 8px; display: flex; align-items: center; justify-content: center; color: white; }
.sfb-sidebar-title { font-size: 20px; font-weight: 700; color: #172A2E; margin: 0; }
.sfb-slots { display: flex; flex-direction: column; gap: 12px; margin-bottom: 25px; }
.sfb-slot { border: 2px dashed #4A8C8C; border-radius: 10px; padding: 10px 15px; display: flex; align-items: center; gap: 15px; height: 75px; background: #FAFCFC; }

/* NUEVO ESPACIO DISPONIBLE */
.sfb-slot.empty { 
    border: 2px dashed #e2e8e8 !important; 
    background: transparent !important; 
    justify-content: flex-start !important; 
    color: #999 !important; font-weight: 500 !important; font-size: 13px !important;
    padding: 15px !important;
}
.sfb-slot-circle {
    width: 24px !important; height: 24px !important; 
    background: #f0f4f4 !important; color: #888 !important; 
    border-radius: 50% !important; display: flex !important; 
    align-items: center !important; justify-content: center !important;
    font-size: 11px !important; font-weight: bold !important; margin-right: 12px !important;
}

.sfb-slot-img { width: 45px; height: 45px; border-radius: 6px; object-fit: cover; }
.sfb-slot-info { flex: 1; display: flex; flex-direction: column; }
.sfb-slot-name { font-size: 12px; font-weight: 700; color: #172A2E; line-height: 1.2; margin-bottom: 3px;}
.sfb-slot-price { font-size: 11px; color: #666; font-weight: 500;}
.sfb-remove-btn { color: #aaa; background: none; border: none; font-size: 20px; cursor: pointer; padding: 0 5px; font-weight: 200;}
.sfb-remove-btn:hover { color: #ff4a4a; }
.sfb-summary { border-top: 1px solid #f0f0f0; padding-top: 20px; }
.sfb-row { display: flex; justify-content: space-between; margin-bottom: 10px; font-size: 13px; color: #666; font-weight: 500;}
.sfb-discount-row { color: #4A8C8C; font-weight: 600; }
.sfb-total-row { font-size: 18px; font-weight: 800; color: #172A2E; margin-top: 15px; border-top: 1px solid #f0f0f0; padding-top: 15px; align-items: center;}
.sfb-submit-btn { width: 100%; background: #172A2E; color: #fff; border: none; padding: 16px; border-radius: 8px; font-size: 15px; font-weight: 600; margin-top: 20px; cursor: pointer; transition: 0.3s; display: flex; align-items: center; justify-content: center; gap: 8px; }
.sfb-submit-btn.ready { background: #172A2E; }
.sfb-submit-btn.ready:hover { background: #2F606F; }
.sfb-submit-btn:disabled { background: #e6eaea; color: #888; cursor: not-allowed; }

/* CENTRADO PERFECTO Y RESPONSIVO */

/* Tablet: Forzar 3 Columnas */
@media (min-width: 601px) and (max-width: 900px) {
    .sfb-grid { 
        grid-template-columns: repeat(3, 1fr) !important; 
        justify-content: center !important; 
        justify-items: stretch !important; 
    }
    .sfb-product-card { width: 100% !important; max-width: none !important; }
}

/* Tablet y Mobile: Layout colapsado */
@media (max-width: 900px) { 
    .sfb-layout { 
        display: flex !important;
        flex-direction: column !important; 
        align-items: stretch !important; /* Permite que la grid tome el ancho 100% */
    } 
    .sfb-sidebar { width: 100% !important; position: static !important; margin-top: 30px !important; } 
    .sfb-main-title { text-align: center !important; }
}

@media (max-width: 768px) {
    .sf-minicart-label { display: none !important; }
}

/* Mobile Small: 2 Columnas */
@media (max-width: 600px) { 
    .sf-actions { padding-left: 20px !important; padding-right: 20px !important; box-sizing: border-box !important; }
    .sfb-grid { 
        grid-template-columns: repeat(2, 1fr) !important; 
        gap: 15px 10px !important;
        justify-content: center !important;
        justify-items: center !important;
    } 
    .sfb-tabs { flex-direction: column; } 
    .sfb-product-card { width: 100% !important; max-width: 200px !important; margin: 0 auto !important; }
}