/* ============================================
   SELECTORES VISUALES - ISLABEYA
   ============================================ */

/* Convertir la tabla a bloque para reorganizar */
.variations {
    display: block !important;
    width: 100% !important;
}

.variations tbody,
.variations tr {
    display: block !important;
}

/* Cada fila del atributo */
.variations tr {
    border-bottom: none !important;
}

/* La celda del label (ahora ocupa toda la fila) */
.variations th.label {
    display: block !important;
    width: 100% !important;
    text-align: left !important;
}

/* La celda de valores */
.variations td.value {
    display: block !important;
    width: 100% !important;
    padding: 0 !important;
}

/* Ocultar el select original */
.variations select {
    display: none !important;
}

/* Contenedor de los swatches */
.islabeya-swatches {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

/* Estilos base para todos los swatches */
.swatch {
    transition: all 0.2s ease;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Swatches de color */
.swatch-color {
    width: 30px;
    height: 30px;
    border-radius: 10px;
    border: 2px solid #e0e0e0;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.swatch-color:hover {
    transform: scale(1.05);
    border-color: #15AD3C;
}

/* Swatches de texto */
.swatch-text {
    background: #f5f5f5;
    border: 1px solid #ddd;
    border-radius: 6px;
    padding: 8px 16px;
    font-size: 14px;
    font-weight: 500;
    color: #333;
}

.swatch-text:hover {
    background: #e0e0e0;
    border-color: #15AD3C;
}

/* Swatch seleccionado */
.swatch.selected {
    border-color: #15AD3C;
    box-shadow: 0 0 0 2px rgba(21, 173, 60, 0.3);
    transform: scale(1.02);
}

.swatch-color.selected {
    border-color: #15AD3C;
    border-width: 1px;
}

.swatch-text.selected {
    background: #15AD3C;
    color: white;
    border-color: #15AD3C;
}

/* Tooltip para colores */
.swatch-color {
    position: relative;
}

.swatch-color:hover::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: -30px;
    left: 50%;
    transform: translateX(-50%);
    background: #333;
    color: white;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    z-index: 10;
}

/* Botón de resetear variaciones */
.reset_variations {
    display: inline-block;
    font-size: var(--tamaño--secundario);
    position: relative;
    padding-left: 22px !important;
    color: var(--color--text_secondary);
    text-decoration: none;
}

.reset_variations::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M13.0828 19.0632C12.6389 19.5072 12.2399 19.9062 11.8725 20.25H21C21.4142 20.25 21.75 20.5858 21.75 21C21.75 21.4142 21.4142 21.75 21 21.75H9C8.98166 21.75 8.96347 21.7493 8.94546 21.748C8.24156 21.7211 7.64439 21.4169 7.05863 20.97C6.47124 20.5218 5.81539 19.866 5.01269 19.0632L4.93674 18.9873C4.13402 18.1846 3.47815 17.5288 3.03 16.9414C2.56159 16.3274 2.25 15.701 2.25 14.9522C2.25 14.2035 2.56159 13.577 3.03 12.9631C3.47816 12.3757 4.13402 11.7199 4.93674 10.9172L10.9172 4.93674C11.7199 4.13403 12.3757 3.47815 12.9631 3.03C13.577 2.56159 14.2035 2.25 14.9522 2.25C15.701 2.25 16.3274 2.56159 16.9414 3.03C17.5288 3.47816 18.1846 4.13402 18.9873 4.93674L19.0632 5.01269C19.866 5.81539 20.5218 6.47124 20.97 7.05863C21.4384 7.67256 21.75 8.29902 21.75 9.04776C21.75 9.79649 21.4384 10.423 20.97 11.0369C20.5219 11.6243 19.866 12.2801 19.0633 13.0827L13.0828 19.0632ZM11.9399 6.03539C12.7899 5.18538 13.3752 4.60235 13.873 4.22253C14.3535 3.85592 14.6633 3.75 14.9522 3.75C15.2411 3.75 15.551 3.85592 16.0315 4.22253C16.5293 4.60235 17.1146 5.18538 17.9646 6.03539C18.8146 6.88541 19.3977 7.47069 19.7775 7.9685C20.1441 8.449 20.25 8.75886 20.25 9.04776C20.25 9.33665 20.1441 9.64651 19.7775 10.127C19.3977 10.6248 18.8146 11.2101 17.9646 12.0601L13.7713 16.2534L7.74662 10.2287L11.9399 6.03539ZM9.04776 20.25C9.33665 20.25 9.64651 20.1441 10.127 19.7775C10.6248 19.3977 11.2101 18.8146 12.0601 17.9646L12.7107 17.314L6.68596 11.2893L6.03539 11.9399C5.18538 12.7899 4.60235 13.3752 4.22253 13.873C3.85592 14.3535 3.75 14.6633 3.75 14.9522C3.75 15.2411 3.85592 15.551 4.22253 16.0315C4.60235 16.5293 5.18538 17.1146 6.03539 17.9646C6.88541 18.8146 7.47069 19.3977 7.9685 19.7775C8.449 20.1441 8.75886 20.25 9.04776 20.25Z' fill='currentColor'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}
.reset_variations:hover {
    text-decoration: underline;
    text-underline-offset: 4px;
}
/* Responsive */
@media (max-width: 768px) {
    .swatch-color {
        width: 36px;
        height: 36px;
    }
    
    .swatch-text {
        padding: 6px 12px;
        font-size: 13px;
    }
}