/*********
 * CATÁLOGO DE PRODUCTOS
**********/
.claudeLanding{

	/* -- Body -- */
	.catalog-body {
		display: flex;
        gap: 28px;
        align-items: flex-start;

        /* -- Filters -- */
        .catalog-filters{
        	width: 260px;
            flex-shrink: 0;
            background: var(--cs-surface);
            border: 1px solid var(--cs-border);
            padding: 20px;
            position: sticky;
            top: 24px;
            box-shadow: var(--cs-shadow);
            max-height: 800px;
			overflow-y: auto;
			overflow-x: hidden;
			scroll-behavior: smooth;

			&::-webkit-scrollbar {
			    width: 5px;
			}
			&::-webkit-scrollbar-track {
			    background: transparent;
			    margin: 8px 0;
			}
			&::-webkit-scrollbar-thumb {
			    background: var(--cs-border);
			    border-radius: 10px;
			    transition: background var(--cs-transition);
			}
			&:hover::-webkit-scrollbar-thumb {
			    background: var(--cs-accent);
			}
			scrollbar-width: thin;

			.button{
				margin-bottom: 0;
			}

            .filters-title{
            	font-size: 18px;
                margin-bottom: 20px;
                display: flex;
                align-items: center;
                justify-content: space-between;
            }

            .filter-group{
            	border-top: 1px solid var(--cs-border);
                padding: 16px 0;

                .filter-group__head{
                	display: flex;
                    align-items: center;
                    justify-content: space-between;
                    cursor: pointer;
                    user-select: none;
                    margin-bottom: 12px;

                    h3{
                    	font-size: 13px;
                        font-weight: 600;
                        text-transform: uppercase;
                        letter-spacing: 1.2px;
                        margin-top: 10px;
                    }

                    .toggle-icon{
                    	font-size: 25px;
                        transition: transform var(--cs-transition);
                        line-height: 1;
                        color: var(--cs-text-muted);
                        transform: rotate(90deg);

                        &.open {
                        	transform: rotate(272deg);
                        }
                    }
                }

                &:not(:has(.toggle-icon.open)){
                	.filter-group__body{
                		display: none;
                	}
                }

                .filter-group__body{

                	/* -- Filter Price -- */
                	.price-range {
					    .price-slider-wrap {
					        position: relative;
					        height: 4px;
					        background: var(--cs-border);
					        border-radius: 2px;
					        margin: 18px 0 10px;

					        .price-track {
					            position: absolute;
					            height: 100%;
					            background: var(--cs-accent);
					            border-radius: 2px;
					        }

					        input[type="range"] {
					            position: absolute;
					            width: 100%;
					            height: 4px;
					            -webkit-appearance: none;
					            appearance: none;
					            background: transparent;
					            pointer-events: none;
					            top: 0;

					            &::-webkit-slider-thumb {
					                -webkit-appearance: none;
					                appearance: none;
					                width: 18px;
					                height: 18px;
					                border-radius: 50%;
					                background: var(--cs-surface);
					                border: 2px solid var(--cs-accent);
					                cursor: pointer;
					                pointer-events: all;
					                box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
					                transition: box-shadow var(--cs-transition);

					                &:hover {
					                    box-shadow: 0 2px 12px rgba(200, 169, 110, 0.4);
					                }
					            }
					        }
					    }

					    .price-inputs {
					        display: flex;
					        gap: 8px;
					        margin-top: 12px;

					        .price-field {
					            flex: 1;

					            label {
					                font-size: 13px;
					                text-transform: uppercase;
					                letter-spacing: 1px;
					                display: block;
					                margin-bottom: 4px;
					            }

					            input {
					                width: 100%;
					                padding: 8px 10px;
					                border: 1px solid var(--cs-border);
					                font-size: 13px;
					                transition: border-color var(--cs-transition);

					                &:focus {
					                    outline: none;
					                    border-color: var(--cs-accent);
					                }
					            }
					        }

					        .sep {
					            align-self: flex-end;
					            padding-bottom: 8px;
					            color: var(--cs-text-muted);
					            font-size: 12px;
					        }
					    }

					    .price-apply{
					    	text-align: right;
						    margin-top: 10px;
						    margin-bottom: 0;
					    }
					}

					/* -- Checkbox list -- */
					.checkbox-list {
					    list-style: none;
					    display: flex;
					    flex-direction: column;
					    gap: 6px;
					    margin-left: 0;
					    margin-bottom: 6px;

					    li {
					        label {
					            display: flex;
					            align-items: center;
					            gap: 10px;
					            cursor: pointer;
					            font-size: 13px;
					            color: var(--cs-text-secondary);
					            padding: 4px 0;
					            transition: color var(--cs-transition);

					            &:hover {
					                color: var(--cs-text-primary);
					            }

					            input[type="checkbox"] {
					            	background: #ffffff;
					                -webkit-appearance: none;
					                appearance: none;
					                width: 18px;
					                height: 18px;
					                border: 1.5px solid var(--cs-border);
					                border-radius: 4px;
					                flex-shrink: 0;
					                cursor: pointer;
					                transition: background var(--cs-transition),
					                    border-color var(--cs-transition);
					                position: relative;

					                &:checked {
					                    background: var(--cs-accent);
					                    border-color: var(--cs-accent);

					                    &::after {
					                        content: "";
					                        position: absolute;
					                        left: 4px;
					                        top: 4px;
					                        width: 8px;
					                        height: 5px;
					                        border-left: 2px solid #fff;
					                        border-bottom: 2px solid #fff;
					                        transform: rotate(-45deg);
					                    }
					                }
					            }

					            .attr-name {
					                flex: 1;
					            }
					            .attr-count {
					                color: var(--cs-text-muted);
					                font-size: 11px;
					            }
					        }

					        &.hidden {
					            display: none;
					        }
					    }
					}

					/* -- Expandable more -- */
					.expandable-area {
					    max-height: 0;
					    overflow: hidden;

					    &.open {
					    	max-height: max-content;
    						overflow-y: auto;
					    }
					}

					.option-list{
						transition: max-height 0.35s cubic-bezier(.4,0,.2,1);
						margin-bottom: 12px;

						&:has(.expandable-area.open){
							max-height: 300px; 
							overflow-y: auto;

							&::-webkit-scrollbar { width: 4px; }
			                &::-webkit-scrollbar-track { background: transparent; }
			                &::-webkit-scrollbar-thumb { background: var(--cs-border); border-radius: 2px; }
						}
					}
                }
            }
        }

        /* -- Products -- */
        .catalog-products {
          	flex: 1;
          	min-width: 0;

          	.products-toolbar {
	            display: flex;
	            align-items: center;
	            justify-content: space-between;
	            margin-bottom: 20px;
	            flex-wrap: wrap;
	            gap: 12px;

	            .toolbar-left {
				    display: flex;
				    align-items: center;
				    gap: 12px;

				    .results-count {
				        font-size: 13px;
				        color: var(--text-secondary);

				        strong {
				            color: var(--text-primary);
				            font-weight: 600;
				        }
				    }
				}

	            .toolbar-right {
				    display: flex;
				    align-items: center;
				    gap: 16px;

				    .sort-wrap,
				    .per-page-wrap {
				        display: flex;
				        align-items: center;
				        gap: 7px;

				        label {
				            font-size: 12px;
				            color: var(--cs-text-muted);
				            text-transform: uppercase;
				            letter-spacing: 0.8px;
				            white-space: nowrap;
				        }

				        select {
				            padding: 7px 28px 7px 12px;
				            border: 1px solid var(--cs-border);
				            font-size: 13px;
				            color: var(--cs-text-primary);
				            background: var(--cs-surface);
				            cursor: pointer;
				            -webkit-appearance: none;
				            appearance: none;
				            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%236b6560'/%3E%3C/svg%3E");
				            background-repeat: no-repeat;
				            background-position: right 10px center;
				            transition: border-color var(--cs-transition);

				            &:focus {
				                outline: none;
				                border-color: var(--cs-accent);
				            }
				        }
				    }
				}
	        }

	        .productGrid{
	        	.price.price--withoutTax{
	        		font-size: 1.15rem;
	        	}
	        }
        }
	}

	.mobile-filter-toggle {
        display: none;
        align-items: center;
        gap: 8px;
        padding: 10px 16px;
        background: var(--cs-surface);
        border: 1px solid var(--cs-border);
        font-size: 13px;
        font-weight: 600;
        color: var(--cs-text-primary);
        cursor: pointer;
        margin-bottom: 16px;
        box-shadow: var(--cs-shadow);
        width: fit-content;
    }

    /* ── RESPONSIVE ── */
    @media (max-width: 900px) {
    	&:has(.catalog-filters.open) {
      		.mobile-filter-toggle {
        		background: var(--btn-primary-background);
    			color: var(--btn-primary-color);
      		}
    	}

    	.mobile-filter-toggle {
		    display: flex;
		}

		.catalog-body {
		    flex-direction: column;

		    .catalog-filters {
		        width: 100%;
		        position: static;
		        display: none;

		        &.open {
		            display: block;
		        }
		    }
		}
    }

    @media (max-width: 540px) {
        .products-toolbar {
          	flex-direction: column;
          	align-items: flex-start;

          	.toolbar-right { 
          		flex-wrap: wrap; 
          	}
        }
    }
}

/*********
 * SUGERENCIAS Y RECOMENDACIONES
**********/
.claude-suggestions,
.claude-highlight{
	position: absolute;
    top: 100%;
    left: 0px;
    right: 0px;
    width: 100%;
    box-sizing: border-box;
    z-index: 1000;
    display: block;
    max-height: 80vh;
    overflow-y: auto;
    border: 1px solid #ddd;

    .suggestions-content{
    	padding: 5px;
    	background: white;
    	box-shadow: var(--cs-shadow);

    	.suggestions-section{
    		margin-bottom: 20px;
		    padding-bottom: 15px;

		    h4{
		    	margin: 0 0 12px 0;
			    font-size: 12px;
			    color: var(--cs-text-muted);
			    font-weight: 600;
			    text-transform: uppercase;
			    letter-spacing: 0.5px;
		    }

		    .suggestions-tags {
                display: flex;
                flex-wrap: wrap;
                gap: 6px;

                .suggestion-tag {
                    padding: 6px 12px;
                    border-radius: 3px;
                    font-size: 11px;
                    cursor: pointer;
                    transition: all 0.2s ease;
                    border: 1px solid #e0e0e0;
                    background: #f8f8f8;
                    color: #666;
                    text-decoration: none;

                    &:hover {
                        background: #333;
                        color: white;
                        border-color: #333;
                    }

                    &.recent {
                        background: #f0f8ff;
                        border-color: #d0e8ff;
                        color: #0066cc;

                        &:hover{
                        	background: #a5d5ff;
                        	border-color: #007cf2;
                        	color: #014384;
                        }
                    }

                    &.popular {
                        background: #fff4e6;
                        border-color: #ffe0cc;
                        color: #cc6600;

                        &:hover{
                        	background: #fed9aa;
                        	border-color: #f78a44;
                        	color: #874400;
                        }
                    }
                }
            }

		    .suggestions-list{
		    	display: flex;
    			-webkit-box-orient: vertical;
    			-webkit-box-direction: normal;
    			flex-direction: column;
    			gap: 8px;

    			.suggestion-item {
                    display: flex;
                    align-items: center;
                    gap: 12px;
                    padding: 5px;
                    border-radius: 4px;
                    cursor: pointer;
                    transition: all 0.2s ease;
                    border: 1px solid #f0f0f0;
                    color: #333;
                    text-decoration: none;

                    &:hover {
                        background: #f8f8f8;
                        border-color: #333;
                    }

                    .suggestion-info {
                        display: flex;
                        align-items: center;
                        gap: 12px;
                        width: 100%;

                        .suggestion-title {
                            flex: 1;
                        }
                    }
                }
		    }

		    .products-list,
		    .trending-products{
		    	display: grid;
    			grid-template-columns: 1fr;
    			gap: 8px;

    			.suggestion-product,
    			.trending-product{
                    display: flex;
                    align-items: center;
                    gap: 10px;
                    padding: 8px;
                    border-radius: 4px;
                    cursor: pointer;
                    transition: all 0.2s ease;
                    border: 1px solid var(--cs-border);
                    text-decoration: none;

                    &:hover {
                        background: #f8f8f8;
                        border-color: #333;
                    }

                    .product-image {
                        width: 40px;
                        height: 40px;
                        background: #f0f0f0;
                        border-radius: 4px;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        font-size: 8px;
                        color: #999;
                        font-weight: 600;
                        flex-shrink: 0;
                    }

                    .product-info {
                        flex: 1;
                        min-width: 0;

                        .product-name {
                            font-size: 12px;
                            font-weight: 600;
                            color: #333;
                            margin-bottom: 10px;
                            line-height: 1.2;
                            overflow: hidden;
                            text-overflow: ellipsis;
                            display: -webkit-box;
						    -webkit-line-clamp: 3;
						    -webkit-box-orient: vertical;
                        }

                        .product-price {
                            font-size: 13px;
                            font-weight: 700;
                            color: #333;
                            background: #f0f0f0;
                            padding: 2px 6px;
                            border-radius: 3px;
                            display: inline-block;
                        }
                    }
                }
		    }
    	}
    }
}

/*********
 * ASISTENTE DE BÚSQUEDAS
**********/
#claude-assistant-label{
	color: white;
    font-size: 15px;
    font-weight: 600;
    display: flex;
    vertical-align: middle;
    gap: 5px;

    .ai-symbol{
    	width: 18px;
        height: 18px;
        color: white;
    }
}

#claude-assistant-search{
	width: 100%;
    background: linear-gradient(135deg, #1e1060 0%, #3b1fa3 60%, #6c3fc5 100%);
    border-radius: 6px;
    padding: 20px 22px 18px;
    margin-bottom: 24px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 28px rgba(60, 30, 160, 0.28);
    animation: slideDown 0.45s cubic-bezier(.22, .68, 0, 1.2) both;
    color: white;

    /* Encabezado */
    .ca-header-box{
    	display: flex;
        align-items: center;
        gap: 12px;

        .ca-icon-wrap {
            flex-shrink: 0;
            width: 38px;
            height: 38px;
            border-radius: 10px;
            background: rgba(255, 255, 255, 0.12);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 18px;
        }

	    .ca-header-content {
		    flex: 1;

		    .ca-title-row {
		        display: flex;
		        align-items: center;
		        gap: 8px;

		        .ca-label {
		            font-size: 0.92em;
		            font-weight: 700;
		            letter-spacing: 0.8px;
		            text-transform: uppercase;
		            color: #fff;
		        }

		        .ca-status-dot {
		            width: 10px;
		            height: 10px;
		            border-radius: 50%;
		            background: #2ecc71;
		            animation: pulseGreen 1.8s infinite;
		            flex-shrink: 0;
		        }
		    }

		    .ca-sublabel {
		        font-size: 0.8em;
		        color: rgba(255, 255, 255, 0.6);
		        margin-top: 2px;
		    }
		}
    }

    /* Mensajes */
    .ca-chat-box {
    	border-top: 1px solid rgba(255,255,255,0.12);
    	margin-top: 14px;
	    padding-top: 14px;
	    display: flex;
	    flex-direction: column;
	    gap: 10px;

	    /* Historial de mensajes */
	    .ca-messages {
	        height: max-content;
	        max-height: 200px;
	        overflow-y: auto;
	        display: flex;
	        flex-direction: column;
	        gap: 8px;
	        padding: 4px 2px 4px 0;
	        scroll-behavior: smooth;

	        /* Scroll personalizado */
	        &::-webkit-scrollbar {
	            width: 5px;
	        }
	        &::-webkit-scrollbar-track {
	            background: rgba(255, 255, 255, 0.09);
	            border-radius: 5px;
	        }
	        &::-webkit-scrollbar-thumb {
	            background: rgba(255, 255, 255, 0.4);
	            border-radius: 5px;
	        }

	        /* ── Burbuja de mensaje base ── */
	        .ca-msg {
	            max-width: 82%;
	            padding: 9px 13px;
	            border-radius: 14px;
	            font-size: 0.84em;
	            line-height: 1.5;
	            animation: fadeUp 0.25s ease both;
	            word-break: break-word;

	            /* Mensaje del USUARIO */
	            &.ca-msg--user {
	                align-self: flex-end;
	                background: rgba(255, 255, 255, 0.18);
	                border-bottom-right-radius: 4px;
	                color: #fff;
	            }

	            /* Mensaje del ASISTENTE */
	            &.ca-msg--assistant {
	                align-self: flex-start;
	                background: rgba(255, 255, 255, 0.1);
	                border: 1px solid rgba(255, 255, 255, 0.13);
	                border-bottom-left-radius: 4px;
	                color: rgba(255, 255, 255, 0.92);
	            }

	            /* ── LOADER */
	            &.ca-msg--loader {
	                align-self: flex-start;
	                background: rgba(255, 255, 255, 0.1);
	                border: 1px solid rgba(255, 255, 255, 0.13);
	                border-bottom-left-radius: 4px;
	                padding: 12px 16px;

	                .ca-dots {
	                    display: flex;
	                    gap: 5px;
	                    align-items: center;

	                    span {
	                        width: 7px;
	                        height: 7px;
	                        border-radius: 50%;
	                        background: rgba(255, 255, 255, 0.6);
	                        display: inline-block;
	                        animation: dotBounce 1.1s infinite ease-in-out;

	                        &:nth-child(1) {
	                            animation-delay: 0s;
	                        }

	                        &:nth-child(2) {
	                            animation-delay: 0.18s;
	                        }

	                        &:nth-child(3) {
	                            animation-delay: 0.36s;
	                        }
	                    }
	                }
	            }
	        }
	    }

	    /* ── INPUT + BOTÓN ── */
	    .ca-input-row {
	        display: flex;
	        align-items: center;
	        gap: 8px;
	        background: white;
	        border: 1px solid #ddd;
	        border-radius: 6px;
	        padding: 6px 6px 6px 14px;
	        transition: border-color 0.2s, background 0.2s;

	        &:has(#ca-input:disabled) {
	        	background: lightgray;
    			cursor: not-allowed;

    			#ca-input{
    				cursor: not-allowed;
    			}
	        }

	        &:has(#ca-send-btn:disabled) {
	        	#ca-send-btn:hover {
	                background: transparent;
    				color: white;
	            }
	        }

	        #ca-input {
	            flex: 1;
	            background: transparent;
	            border: none;
	            outline: none;
	            font-size: 0.88em;
	            color: #333;

	            &::placeholder {
	                color: gray;
	            }
	        }

	        #ca-send-btn {
	            flex-shrink: 0;
	            width: 34px;
	            height: 34px;
	            border-radius: 8px;
	            background: #6c3fc5;
	            border: none;
	            cursor: pointer;
	            display: flex;
	            align-items: center;
	            justify-content: center;
	            transition: background 0.18s, transform 0.12s;
	            color: white;
	            font-size: 15px;

	            &:hover {
	                background: transparent;
    				color: #3b1fa3;
	            }

	            &:active {
	                transform: scale(0.93);
	            }

	            &:disabled {
	            	background: #333;
	                opacity: 0.8;
	                cursor: not-allowed;
	            }
	        }
	    }

	    /* ── Hint de sugerencias rápidas ── */
	    .ca-suggestions-title{
	    	text-transform: capitalize;
	    	font-size: 0.85em;
	    }

	    .ca-suggestions {
	        display: flex;
	        flex-wrap: wrap;
	        gap: 6px;

	        .ca-chip {
	        	background: white;
                color: #333;
                font-size: .80em;
	            border: 1px solid rgba(255, 255, 255, 0.14);
	            border-radius: 20px;
	            padding: 4px 11px;
	            cursor: pointer;
	            transition: background 0.18s, color 0.18s;
	            user-select: none;

	            &:hover {
	                background: rgba(255, 255, 255, 0.18);
	                color: #fff;
	            }
	        }
	    }
	}
}

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

@keyframes pulseGreen {
  0%   { box-shadow: 0 0 0 0 rgba(46,204,113,0.5); }
  70%  { box-shadow: 0 0 0 8px rgba(46,204,113,0); }
  100% { box-shadow: 0 0 0 0 rgba(46,204,113,0); }
}

@keyframes dotBounce {
	0%, 60%, 100% { transform: translateY(0); opacity: 0.6; }
	30%            { transform: translateY(-5px); opacity: 1; }
}

:root{
	--cs-surface: #f6f6f6;
	--cs-border: #eee;
	--cs-shadow: 0 2px 16px rgba(0, 0, 0, 0.07);
	--cs-transition: 0.22s cubic-bezier(.4, 0, .2, 1);
	--cs-accent: var(--btn-primary-background);
	--cs-text-muted: #a09a93;
	--cs-text-secondary: #6b6560;
	--cs-text-primary: #1a1714;
}